pc端使用window.URL.createObjectURL预览文档（word、pdf）

window.URL.createObjectURL可用于在浏览器上预览本地的图片或视频。

常用用法：

想在本地没有上传服务器的情况下看到上传图片、文件的效果图，就可以通过var url = window.URL.createObjectURL(files[0])；获得一个http格式的url路径，设置到图片的src属性值，就可以显示效果了。

语法：

objectURL = URL.createObjectURL(blob || file);

参数：

File对象 || Blob对象

File对象,是个文件,若用input type="file"标签来上传文件,获得到的就是一个File对象.

Blob对象,是二进制数据,最简单的new Blob()创建的对象就是Blob对象.又比如,在发送请求时,指定请求头的responseType为blob,那么得到的返回值也是一个blob对象.

//html
<el-drawer v-model="showPDF" title="标题" size="70%">
//type 用于判断文件类型是word还是pdf,为0是word文档
            <div ref="refWord" v-if="type == '0'" />
            <iframe :src="PDFURL" width="100%" height="1000px" v-else />
 </el-drawer>

//js
//预览word需要docx-preview依赖
import * as docx from "docx-preview";
preview(){
        this.showPDF = true;
        let blob = "";
        let xhr = new XMLHttpRequest();
        xhr.open("GET", 完整的http文件路径);
        xhr.responseType = "blob";
        // 加载时处理
        xhr.onload = () => {
            // 获取返回结果
            blob = xhr.response;
            // 返回结果,type判断文件类型是否是word
            if (type == "0") {
                docx.renderAsync(blob, this.refs.refWord);
            } else {
                let blob1 = new Blob([blob], {
                    type: "application/pdf",
                });
                this.PDFURL = window.URL.createObjectURL(blob1);
            }
        };
        // 发送
        xhr.send();
    };