当前位置：首页 > article >正文

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

article 2025/2/23 6:13:34

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

实现方式一：

使用弹窗和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("https://www.example.com");
// 打开一个新窗口，指定名称、特性
window.open("https://www.example.com", "_blank", "width=800,height=600,scrollbars=yes");
// 打开一个新窗口，使用已知的窗口名称
window.open("https://www.example.com", "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("https://www.example.com", "_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属性的值