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

码田里的小白菜

已于 2023-03-27 16:38:47 修改

阅读量3.4k

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-23 16:24:22 首次发布

本文链接：https://blog.csdn.net/weixin_45294459/article/details/129733471

版权

文章介绍了如何使用window.URL.createObjectURL方法在浏览器中预览本地的图片和文件，特别是通过File对象或Blob对象来实现。当上传文件时，可以将File对象转换为URL，然后赋值给图片的src属性进行预览。此外，还展示了在处理word和PDF文档时的应用，包括使用docx-preview库预览word文档和转换Blob为PDF类型来显示PDF。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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();
    };