39、vue实现word文档预览

1、安装插件

npm i docx-preview --save

2、在组件中使用引入插件

var docxx = require("docx-preview");

3、实现代码如下

（1）、vue代码

文档预览
        
        
            

        

（2）、js代码

组件引入后端接口函数

import {dcwordfile} from "@/api/api.js";

api/api.js文件中的接口函数

//获取word文档流接口函数
export function dcwordfile(url,method,params){
    return request({
        url:'/scyyjg'+url,//接口地址
        method,
        params,
        // responseType: `arraybuffer` //一定要写
        responseType:'blob',//将文件流转成blob对象
        noErrorMsg:true
    })
}

请求后端接口，处理返回文档流，并调用docx-previre插件的renderAsync方法渲染文件到dialog弹窗中

//文件预览
        createpsbgDoc() {
            this.dialogVisible = true;
            dcwordfile("/reportForms/v1/downWord", 'get', {
                id: this.menuId,
                pdate: this.pdate,
            }).then(res => {
                if (res.status == 200) {
                    let blob = new Blob([res.data],
                        {
                            type: `application/msword` //word文档为msword,pdf文档为pdf
                        });
                    docxx.renderAsync(res.data, this.$refs.word);
                }
            });
        },

结束