vue3结合后端传递过来的文件进行预览功能

业务的需要，前端需要根据后端传递过来的文件流进行预览的功能，前端点击链接直接触发浏览器的窗口的预览功能。

实现方式一： 使用弹窗和iframe的标签的形式进行预览文件，但是iframe可能会出现网站安全性的问题，限制比较大 实例代码： <el-dialog v-if="previewShowPdf" title="预览" :visible.sync="previewShowPdf" append-to-body width="90%" v-loading="loading"> <!-- PDF显示的地方 --> <iframe ref="pdf" :src="previewUrl" width="100%"></iframe> <span slot="footer" class="dialog-footer"> <el-button type="primary" plain @click="previewShowPdf = false">关 闭</el-button> </span> </el-dialog> 实现方式二：使用原生的window.open()方法 描述： window.open() 是 JavaScript 中用来打开新浏览器窗口或标签页的方法。它的基本语法如下 window.open(URL, name, specs, replace);

参数： URL (可选)：要打开的页面的 URL。如果为空，打开一个空白页面。 name (可选)：指定新窗口或标签页的名称。如果该名称已经存在，会在相同窗口中加载 URL。如果没有指定或为空，则会使用默认值 _blank 打开新窗口。 specs (可选)：指定新窗口的特性，如宽度、高度、是否显示工具栏、滚动条等。多个特性用逗号分隔。 replace (可选)：布尔值，表示是否替换当前历史记录。默认为 false。

实例代码：

// 打开一个新窗口，显示指定的URL window.open(" .example "); // 打开一个新窗口，指定名称、特性 window.open(" .example ", "_blank", "width=800,height=600,scrollbars=yes"); // 打开一个新窗口，使用已知的窗口名称 window.open(" .example ", "myWindow", "width=800,height=600"); // 打开一个空白窗口并不替换历史记录 window.open("", "_blank", "width=400,height=300", false);

参数说明：

URL：要打开的页面的地址。如果省略或传递空字符串，浏览器会打开一个空白页面。 name： _blank：打开新标签页或新窗口（最常用）。 _self：在相同的窗口中加载页面（默认）。 _parent：在父框架中加载页面。 _top：在整个窗口（最上层）中加载页面。 windowName：可以指定任何自定义名称的窗口，如果有相同名称的窗口，则会在该窗口中加载内容。 specs：这是一个逗号分隔的字符串，用于定义新窗口的特性，比如： width：窗口的宽度。 height：窗口的高度。 resizable：是否允许调整窗口大小（yes 或 no）。 scrollbars：是否显示滚动条（yes 或 no）。 toolbar：是否显示工具栏（yes 或 no）。 menubar：是否显示菜单栏（yes 或 no）。 location：是否显示地址栏（yes 或 no）。 status：是否显示状态栏（yes 或 no）。 示例："width=600,height=400,scrollbars=yes,resizable=yes"。

例子：

// 打开一个宽度为 600px、高度为 400px 的新窗口，带有滚动条和可调整大小的功能 window.open(" .example ", "_blank", "width=600,height=400,scrollbars=yes,resizable=yes"); // 打开一个空白窗口 window.open("", "_blank", "width=400,height=300");

注意： 由于浏览器的弹窗拦截器，window.open() 的调用可能会被阻止，尤其是在没有用户交互（如点击事件）的情况下。因此，通常需要通过用户操作（如点击按钮）触发 window.open()。 在现代浏览器中，过多的弹窗可能会被浏览器自动屏蔽。

实现方式三： 使用a链接模拟文件打开文件进行预览，这个需要后端配合，不然就是文件的下载。 代码实例 let link = document.createElement('a'); // 创建一个 元素 link.href = val; //设置链接的 href 属性 link.download = '文件预览'; //设置文件名 link.style.display = 'none'; // 隐藏元素 document.body.appendChild(link); //将链接添加到文档中 link.click(); // 模拟点击，触发下载 document.body.removeChild(link); //下载完成，删除元素 实现方式四：

·使用各自文件预览的插件例如PDF.js或者docx的预览或者xlsx预览或者图片的预览 安装的插件

npm install docx-preview 引入的包：import { renderAsync } from 'docx-preview'; npm install pdfjs-dist 引入的包： import * as PDFJS from "pdfjs-dist/legacy/build/pdf"; // 引入PDFJS import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址 npm install xlsx 引入的包： import * as XLSX from 'xlsx/xlsx.mjs' 图片的预览较为简单： const blobImage = new window.Blob([res.data], { type: 'image/' + fileType }) // fileType指图片的类型 const imageHref = URL.createObjectURL(blobImage); // 创造一个地址 preloadImg.value = imageHref // img标签的src属性的值