vue实现word、excel、pdf在线预览

一、word在线预览

(使用过程中发现 docx-preview@0.1.18不兼容谷歌70.0.3538.110版本 降低docx-preview版本至0.1.8解决)

npm uninstall docx-preview
yarn add docx-preview@0.1.8

1. 

yarn add docx-preview

2.

<div ref="childRef" class="childRef"></div>

3.

import { renderAsync } from 'docx-preview';

4.

filePath:"", //文件路径

5.

this.Preview()

6.

Preview(){
        let docx = require('docx-preview');
            this.$nextTick(() => {
              fetch(this.filePath)
                .then((response) => {
                  let docData = response.blob(); //将文件转换成bolb形式
          
                   //选择要渲染的元素
                  let childRef = document.getElementsByClassName('childRef');
          
                   //用docx-preview渲染
                  renderAsync(docData, childRef[0]).then((res) => {
                    console.log('res---->', res);
                  });
                })
                .catch((error) => {
                  console.log(error);
                });
            });
      },

7.

/deep/.docx-wrapper{
    background:white;
    display: block;
    padding:10px 30px;
  }
/deep/.docx-wrapper > section.docx {
   width: 100% !important;
 }

二、excel和pdf在线预览

npm install @vue-office/excel vue-demi
npm install @vue-office/pdf vue-demi
npm install @vue/composition-api //vue2.6版本以下需安装

import VueOfficeExcel from '@vue-office/excel'
import VueOfficePdf from '@vue-office/pdf'
import '@vue-office/excel/lib/index.css'

components:{
     VueOfficeExcel,
     VueOfficePdf
},

<vue-office-excel :src="previewUrl" style="height: 100vh;"  />
<vue-office-pdf :src="previewUrl" />