在线打开 word、excel、pdf 文件

需求：上传的word、excel、pdf 能够在线预览。

1.word在线预览

安装docx-preview

npm i docx-preview

用弹窗展示word内容，用一个div标签渲染word文件，获取后端返回的二进制文件流，请注意接口请求的response Type 类型 为 blob，如代码代码如下：

<template>
  <div>
  <el-button @click="handleServeFile()"></el-button>
   <el-dialog
      :visible.sync="fileVisible"
      :title="fileName"
      width="1000px"
      @close="handleCloseClick"
      append-to-body
    >
      <div v-html="vHtml" ref="file"></div>
    </el-dialog>
  </div>
</template>

<script>
let docx = require('docx-preview');//引入docx插件
export default {
 data(){
    return{
      fileVisible:false,
      fileUrl:undefined,
      fileName:undefined,
    }
  },
methods:{
 handleServeFile(item){
   this.fileName = item.fileName
      getDocumentById({id:item.id}).then(res=>{
        this.fileVisible = true
        console.log('docx--',res)
        // 带格式文本
        setTimeout(() => {
          this.$nextTick(() => {
            //带格式文本
            docx.renderAsync(res, this.$refs.file);

          })
        }, 200)
      })
  }
 }
}

在request.js中导出

// 根据id获取文档协议
export function getDocumentById(query) {
  return request({
    url: '/supplier/getDocumentById',
    method: 'get',
    responseType: 'blob',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + getToken()
    },
    params: query
  })
}

效果图

2.excel 的在线预览

安装xlsx插件

 npm install --save xlsx

在弹窗展示excel文件

<template>
  <div>
  <el-button @click="handleServeFile()"></el-button>
  <el-dialog
      :visible.sync="fileVisible"
      :title="fileName"
      width="1000px"
      @close="handleCloseClick"
      append-to-body
    >
      <el-table :data="excelData" style="width: 100%">
                <el-table-column
                    v-for="(value, key, index) in tableColumn"
                    :key="index"
                    :prop="key"
                    :label="key"
                ></el-table-column>
            </el-table>
 </el-dialog>

  </div>
</template>

<script>
var XLSX = require("xlsx");//引入xlsx插件
export default {
 data(){
    return{
      fileVisible:false,
      fileUrl:undefined,
      fileName:undefined,
    }
  },
methods:{
 handleServeFile(item){
   this.fileName = item.fileName
     //调用接口，对返回参数进行解析与渲染
      getExcelById({id:item.id}).then(res=>{
             //带格式文本
             //excel 在网页打开
              this.fileVisible = true
              var data = new Uint8Array(res.data);
              var excelData = XLSX.read(data, { type: "array" });
              var sheetNames = excelData.SheetNames; // 工作表名称集合
              var worksheet = excelData.Sheets[sheetNames[0]];
              this.excelData = XLSX.utils.sheet_to_json(worksheet);
      })
  }
 }
}

提交请求，获取后端返回的二进制文件流，请注意接口请求的response Type 类型 为 arraybuffer，代码如下：

// 根据id获取文excel
export function getExcelById(data) {
  return request({
    url: '/xxx/xxx',
    method: 'post',
    responseType: 'arraybuffer',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + getToken()
    },
    data: data
  })
}

3.pdf在线预览

安装vue-pdf插件

npm install --save vue-pdf

页面使用

import pdf from 'vue-pdf';

components: { pdf},

<el-dialog              
         :visible.sync = 'fileVisible'
         :title="fileName"
         width="1000px"
         append-to-body 
            >
       <pdf src="/pdf.pdf"></pdf>
</el-dialog>