用的mammoth插件 需要先npm安装
ios不可以直接打开外部文档链接 或者下载 所以该插件原理是将word文档转为html从而达到预览的效果
看到了别的妹妹发的文 跟着做了下 果然解决了问题
<template>
<div>
<header-back></header-back>
<div ref="box" class="mainBox" id="mainBox">
<div ref="docPreview"></div>
</div>
</div>
</template>
<script>
//头部导航组件引入
import HeaderBack from '@/components/header-back';
//引入插件
import mammoth from 'mammoth'
export default {
components: {HeaderBack},
data() {
return {
url:''
}
},
mounted() {
//获取传到该页面的word文档地址
this.url=this.$route.params.pageSrc;
//预览函数
this.previewFile();
},
methods: {
previewFile(){
let _this=this;
try {
var xhr = new XMLHttpRequest();
xhr.open("GET", this.url);
xhr.responseType = "arraybuffer";
xhr.onload = function(e) {
var arrayBuffer = xhr.response; //arrayBuffer
mammoth
.convertToHtml({arrayBuffer: arrayBuffer })
.then(displayResult)
.done();
function displayResult(result) {
_this.$refs.docPreview.innerHTML = result.value || "";
}
};
xhr.send();
} catch (e) {
console.log(e);
}
}
}}
</script>
<style scoped>
.mainBox {
word-break: break-all;
background: #fafafb;
position: absolute;
top: 1.6rem;
left: 0px;
height: 91vh;
width: 100%;
overflow: scroll;
border-radius: 32px 32px 0 0;
z-index: 999;
font-size: 16px;
text-align:center
}
//因为ios不可以直接打开外部文件链接 所以这个插件的原理是把word转成html来嵌入页面 所以word内容样式可以随意写
#mainBox >>> img{
width: 90%;
}
#mainBox >>> p{
width: 90%;
margin-left: 5%;
}
</style>