Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!

先上���果图

 

 插件安装

先说 word 文件是docx-preview插件

          excel文件是用 xlsx 插件    

介绍后端返回的数据

因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含:

url : blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据，比如显示图像或者播放音视频文件

blobs:  返回的Blob对象，代表了从网络请求中获取到的二进制数据

这上下俩部分很重要!!!!!!!!

如果返回的普通格式的话就大家直接转化

1. const blob = new Blob([res], { type: 'application/pdf' })  //你需要的类型 转化为blob对象

2. const url = window.URL.createObjectURL(blob)         //将对象转化为链接

---

也就是你后面掉接口返回的数据  

给大家打印一下 我当时在网上搜索这类资料的时候 就是在这一部分弄糊涂了 对数据格式不了解

 

 然后就到正式书写了

下载引入插件 (我这是v3 引入 vue2版本 csdn官网上搜vue预览文件 一大堆 大家自己搜一下)

//word文档注释import { renderAsync } from 'docx-preview';//excel注释import * as XLSX from "xlsx";

Word预览   

不清楚result 返回内容的往上滑 这里传递的是blob对象!!

        //js代码处     const previewContainer = document.getElementById('fileShow');            renderAsync(result.blob, previewContainer) //渲染

Excel预览

不清楚result 返回内容的往上滑 这里传递的是blob对象!!    中间内容是在拿到数据渲染的时候插件数据处理 最后将处理的数据当参数传递到处理样式的方法中

                                                                        //js代码处//表格预览所需数据 定义const data = reactive({    excel: {        // 数据        workbook: {},        // 表名称集合        sheetNames: [],        // 激活项        sheetNameActive: "",        // 当前激活表格        SheetActiveTable: ""    }})const { excel } = toRefs(data);// 视频预览所需数据const emptyTips = ref('暂无内容');      //格式为excel时 方法中书写的内容             const reader = new FileReader(); //创建了一个FileReader对象，这个对象用于异步读取文件内容            //通过readAsArrayBuffer将blob转换为ArrayBuffer对象            reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流            reader.onload = (event) => {                // 读取ArrayBuffer数据变成Uint8Array                var data = new Uint8Array(event.target.result);                // 这里的data里面的类型和后面的type类型要对应                var workbook = XLSX.read(data, { type: "array" });                const sheetNames = workbook.SheetNames // 工作表名称集合                excel.value.workbook = workbook                excel.value.sheetNames = sheetNames                excel.value.sheetNameActive = sheetNames[0]                //方法                getSheetNameTable(sheetNames[0])            };//定义的方法const getSheetNameTable = (sheetName) => {       try {        // 获取当前工作表的数据        const worksheet = excel.value.workbook.Sheets[sheetName]        // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改        let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })        htmlData = htmlData === '' ? htmlData : htmlData.replace(/     //js代码处  //格式为pdf时             const reader = new FileReader();            reader.readAsArrayBuffer(result.blob);            reader.onload = function () {                fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" }))            }

h4最后是jpg png ,mp4格式预览/h4 pre //这里就用到blob对象转化的链接了 注意区分!!if (type == 'jpg' || type == 'png' || type == 'mp4') { fileAddress.value = result.url}//图片类型展示 img :src="fileAddress" v-if="fileType == 'jpg' || fileType == 'png'"//视频类型展示 video :src="fileAddress" controls /video /pre h4下载文件 !!/h4 pre el-button @click="DownloadFn()" 下载/el-button// 文件下载const DownloadFn = () => { let a = document.createElement('a') // 下载链接 a.href = blobUploadValue.value //这个就是那个blob链接!! // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf' //这里是你上传的文件名 加上他的类型 jpg,png,docx..... a.download = fileNameValue.value + '.' + fileType.value document.body.appendChild(a) // 点击a标签，进行下载 a.click() // 移除元素 document.body.removeChild(a)}

最后是完整代码 

                                                                {{ item.name }}                                                                                 下载                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   该文件暂不支持预览,请下载查看                                                        //js部分//表格预览所需数据const data = reactive({    excel: {        // 数据        workbook: {},        // 表名称集合        sheetNames: [],        // 激活项        sheetNameActive: "",        // 当前激活表格        SheetActiveTable: ""    }})const { excel } = toRefs(data);// 视频预览所需数据const emptyTips = ref('暂无内容');// 下载文件// 文件地址const fileAddress = ref('')// 下载流数据const blobUploadValue = ref('')//我这里的参数type是其他地方传递过来的 注意甄别const downloadFn = (id, type) => {    let params = { fileId: id }    download(params).then(result => {        console.log(result.url, 'resolve');        console.log(result.blob, 'blob');         blobUploadValue.value = result.url        if (type == 'jpg' || type == 'png' || type == 'mp4') {            //格式为图片 视频时            fileAddress.value = result.url        } else if (type == 'docx') {            //格式为word时            const previewContainer = document.getElementById('fileShow');            renderAsync(result.blob, previewContainer) //渲染        } else if (type == 'xlsx') {            //格式为excel时            const reader = new FileReader();            //通过readAsArrayBuffer将blob转换为ArrayBuffer对象            reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流            reader.onload = (event) => {                // 读取ArrayBuffer数据变成Uint8Array                var data = new Uint8Array(event.target.result);                // 这里的data里面的类型和后面的type类型要对应                var workbook = XLSX.read(data, { type: "array" });                const sheetNames = workbook.SheetNames // 工作表名称集合                excel.value.workbook = workbook                excel.value.sheetNames = sheetNames                excel.value.sheetNameActive = sheetNames[0]                getSheetNameTable(sheetNames[0])            };        } else if (type == 'pdf') {            //格式为pdf时             const reader = new FileReader();            reader.readAsArrayBuffer(result.blob);            reader.onload = function () {                fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" }))            }        }    })}// 文件下载const DownloadFn = () => {     let a = document.createElement('a')     // 下载链接    a.href = blobUploadValue.value    // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'    a.download = fileNameValue.value + '.' + fileType.value    document.body.appendChild(a)    // 点击a标签，进行下载     a.click()    // 移除元素    document.body.removeChild(a)}const getSheetNameTable = (sheetName) => {       try {        // 获取当前工作表的数据        const worksheet = excel.value.workbook.Sheets[sheetName]        // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改        let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })        htmlData = htmlData === '' ? htmlData : htmlData.replace(/