常见文件预览实现

一：word文档预览

1：使用文档预览服务预览

• 使用微软链接：https://view.officeapps.live.com/op/view.aspx?src=文档http地址
• 使用XDOC链接：http://view.xdocin.com/xdoc?_xdoc=文档http地址

(1)：HTML

<iframe src="" frameborder="0" id='word'></iframe>

(2)：JS

var url = 'http://XXXX';
//微软的链接：文件地址得是公网的
let wordUrl = "https://view.officeapps.live.com/op/view.aspx?src=" + url;
//XDOC的链接：文件地址可以是非公网
var wordUrl='http://view.xdocin.com/xdoc?_xdoc=' + url;

// js写法
var url = document.getElementById('word');
url.src = wordUrl;
// jquery写法
$("#word").attr('src',wordUrl);

注意：

提示：because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

解决方案：修改html的head部分的meta

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content: https://*; media-src * blob: 'self' http://* 'unsafe-inline' 'unsafe-eval'; style-src * 'self' 'unsafe-inline'; img-src * 'self' data: content:; connect-src * blob:;">

2：使用vue-office/docx预览

(1)：安装

npm install @vue-office/docx vue-demi

(2)：引入

import VueOfficeDocx from "@vue-office/docx";

(3)：使用

 <vue-office-docx
     :src="文档地址"
     @rendered="rendered"//word加载结束的事件
/>

3：使用mammoth.browser.js预览

(1)：JS引入

<script src="https://cdn.bootcss.com/mammoth/1.4.8/mammoth.browser.js"></script>

(2)：HTML

<iframe src="" frameborder="0" id="container"></iframe>

(3)：JS

var xhr = new XMLHttpRequest();
xhr.open(
        "GET",
        `文档地址`
);
        xhr.responseType = "arraybuffer";
        xhr.send()
        xhr.onload = function (e) {
            console.log(xhr.response);
            let content = xhr.response;
            let blob = new Blob([content], {
                type: "application/docx"
            });
            let reader = new FileReader();
            reader.readAsArrayBuffer(blob);
            reader.onload = function (loadEvent) {
                var arrayBuffer = xhr.response; //arrayBuffer
                mammoth
                .convertToHtml({
                    arrayBuffer: arrayBuffer
                })
                .then(displayResult)
                .done();
        };
        function displayResult(result) {
            document.getElementById("container").innerHTML = result.value;
        }
};

注意：mammoth.browser.js只可预览后缀为docx的文件且是将文件转化为html形式展示

二：PDF文档预览

1：使用iframe预览

<iframe src="文档地址" frameborder="0"></iframe>

2：使用vue-pdf预览

(1)：安装

npm install vue-pdf

(2)：引入

import pdf from "vue-pdf";

(3)：使用

<pdf v-for="i in numPages" :key="i" :src="viewUrl" :page="i"></pdf>

data() {
  return {
    // 当前页数
    numPages: 1,
    // 预览路径
    viewUrl:"文档地址",
  };
},
mounted() {
  this.getNumPages();
},
methods: {
  async getNumPages() {
    let loadingTask = pdf.createLoadingTask(this.viewUrl);
    loadingTask.promise
      .then((pdf) => {
        this.numPages = pdf.numPages;
    })
    .catch(() => {
      console.error("pdf加载失败");
    });
  },
}

3：使用vue-pdf-embed预览

(1)：安装

npm install vue-pdf-embed

(2)：引入

import VuePdfEmbed from "vue-pdf-embed/dist/vue2-pdf-embed";

(3)：使用

<vue-pdf-embed :source="文档地址"></vue-pdf-embed>

4：使用pdfh5.js预览

(1)：引入

pdfh5.js下载地址：

链接：https://pan.baidu.com/s/1gTWUCe7xt3om14lU3g1GjQ 
提取码：yune

// 引入css
<link rel="stylesheet" href="pdf/pdfh5.css">
// 引入js
<script src="pdf/pdf.js"></script>
<script src="pdf/pdf.worker.js"></script>
<script src="pdf/pdfh5.js"></script>

(2)：HTML

<div id="demo"></div>

(3)：JS

var pdfh5 = new Pdfh5('#demo', {
        pdfurl: '文档地址'
});

三：txt文档预览

1：使用textarea实现预览

(1)：读取txt内容

let xhr = new XMLHttpRequest();
xhr.open("get", '文档地址', true);
xhr.responseType = "blob";
xhr.onload = (e) => {
    if (e.currentTarget.status == 200) {
        const reader = new FileReader();
        reader.readAsText(e.currentTarget.response);//非常重要
        reader.onload = () => {
            txtContain = reader.result;
        };
    }
};
xhr.send();

(2)：预览HTML

<textarea :value="txtContain" readonly></textarea>