vue项目前端预览pdf、docx、xls

office online

微软office平台提供的文档预览服务
https://view.officeapps.live.com/op/view.aspx?src+文档地址
文档地址必须是域名80端口且公开访问
缺点由于不可抗力概率访问失败

私人文档预览云服务

XDOC（免费）
officeweb365
…

pdf

1. pdf支持网页直接打开预览
2. vue-pdf 文档

npm i -S vue-pdf

      <pdf :src="fileUrl" @num-pages="pageCount=$event" :page="currentPage"></pdf>
      <!-- 分页根据需求使用 -->
      <div class="page-view" v-if="pageCount > 1">
        <span @click="currentPage > 1 ? currentPage-- : 1" class="turn" :class="{grey: currentPage==1}">Preview</span>
        {{currentPage}} / {{pageCount}}
        <span @click="currentPage < pageCount ? currentPage++ : 1" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
      </div>
  import pdf from 'vue-pdf'
  export default {
    components: {
      pdf
    },
    data() {
      return {
        pageCount: 0,
        currentPage: 1,
        fileUrl: ''
      }
    },

docx

• mammoth.js 文档

npm install mammoth

// 请求文件流，本地文件参考文档
const xhr = new XMLHttpRequest();
xhr.open('get', 'your file url', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
  if (xhr.status == 200) {
    mammoth.convertToHtml({arrayBuffer: new Uint8Array(xhr.response)}).then(function (resultObject) {
      document.querySelector('#wordView').innerHTML =resultObject.value
    })
  }
}
xhr.send();

xls

• SheetJS js-xlsx 文档

npm install xlsx

if(typeof require !== 'undefined') XLSX = require('xlsx');
// let workbook = XLSX.readFile('test.xlsx');
const xhr = new XMLHttpRequest();
xhr.open('get', 'your file url', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
  if (xhr.status == 200) {
    let data = new Uint8Array(xhr.response)
    let workbook = XLSX.read(data, {type: 'array'});
    let sheetName = workbook.SheetNames
    let innerHTML = ''
    // 遍历多个表
    for (let i in sheetName) {
      let sheet = workbook.Sheets[sheetName[i]]
      innerHTML += XLSX.utils.sheet_to_html(sheet)
    }
    document.querySelector('#xlsxView').innerHTML = innerHTML
  }
};
xhr.send();