网站推广工作如何做,手机网站课程,企业网站带后台模板,海城区建设局网站业务的需要#xff0c;前端需要根据后端传递过来的文件流进行预览的功能#xff0c;前端点击链接直接触发浏览器的窗口的预览功能。 实现方式一#xff1a;
使用弹窗和iframe的标签的形式进行预览文件#xff0c;但是iframe可能会出现网站安全性的问题#xff0c;限制比较… 业务的需要前端需要根据后端传递过来的文件流进行预览的功能前端点击链接直接触发浏览器的窗口的预览功能。 实现方式一
使用弹窗和iframe的标签的形式进行预览文件但是iframe可能会出现网站安全性的问题限制比较大实例代码el-dialog v-ifpreviewShowPdf title预览 :visible.syncpreviewShowPdfappend-to-body width90% v-loadingloading!-- PDF显示的地方 --iframe refpdf :srcpreviewUrl width100%/iframespan slotfooter classdialog-footerel-button typeprimary plain clickpreviewShowPdf 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, width800,height600,scrollbarsyes);
// 打开一个新窗口使用已知的窗口名称
window.open(https://www.example.com, myWindow, width800,height600);
// 打开一个空白窗口并不替换历史记录
window.open(, _blank, width400,height300, 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。示例width600,height400,scrollbarsyes,resizableyes。例子 // 打开一个宽度为 600px、高度为 400px 的新窗口带有滚动条和可调整大小的功能
window.open(https://www.example.com, _blank, width600,height400,scrollbarsyes,resizableyes);// 打开一个空白窗口
window.open(, _blank, width400,height300);注意 由于浏览器的弹窗拦截器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属性的值
