前端实现文件预览功能?需求：实现一个在线预览pdf、excel、word、图片等文件的功能。介绍：支持pdf、xlsx、docx、jpg、png、jpeg。以下使用Vue3代码实现所有功能，建议以下的预览文件标签可以在外层包裹一层弹窗。?图片预览iframe标签能够将另一个HTML页面嵌入到当前页面中，我们的图片也能够使用iframe标签来进行展示。 </code></pre><p data-track="8"><span style="letter-spacing: 1.5px;"><strong><span style="color: #595959; --tt-darkmode-color: #595959;">「sandbox」</span></strong><span style="color: #595959; --tt-darkmode-color: #595959;">这个属性如果是单纯预览图片可以不使用，该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。属性值可以为空字符串（这种情况下会启用所有限制），也可以是用空格分隔的一系列指定的字符串。</span></span></p><ul><li data-track="9"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">allow-scripts: 允许嵌入的浏览上下文运行脚本（但不能创建弹窗）。如果没有使用该关键字，就无法运行脚本。</span></span></li><li data-track="10"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">allow-top-navigation: 允许将框架内所加载页面中的超链接导航到父级窗口</span></span></li><li data-track="11"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">allow-same-popups: 允许弹窗 (例如 window.open, target="_blank")。如果没有使用该关键字，相应的功能将自动被禁用。</span></span></li><li data-track="12"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">allow-same-origin: 如果没有使用该关键字，嵌入的浏览上下文将被视为来自一个独立的源，这将使 same-origin policy 同源检查失败。使用了这个属性，那么当前页面和iframe打开的页面视为同源。</span></span></li></ul><h1 class="pgc-h-arrow-right" data-track="13">word文档预览（docx）</h1><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>先下载npm包 npm i docx-preview --save </code></pre><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><div class="docxRef"></div> <script> import { renderAsync } from 'docx-preview'; function fn() { // 这里的res.data是 blob文件流，如果自己的不是blob文件流 // 可以通过URL.createObjectURL(参数) 参数为File格式，转换为blob文件流 let blob = res.data let childRef = document.getElementsByClassName('docxRef'); renderAsync(blob, childRef[0]) //渲染 } fn() </script> </code></pre><p data-track="16"><span style="letter-spacing: 1.5px;"><strong><span style="color: #595959; --tt-darkmode-color: #595959;">「blob文件流」</span></strong></span></p><h1 class="pgc-h-arrow-right" data-track="17">预览excel文件(xlsx)</h1><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>下载包 npm install xlsx@0.16.0 </code></pre><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><div class="xlsxClass"></div> const reader = new FileReader(); //通过readAsArrayBuffer将blob转换为ArrayBuffer对 reader.readAsArrayBuffer(res.data) // 这里的res.data是blob文件流 reader.onload = (event) => { // 读取ArrayBuffer数据变成Uint8Array var data = new Uint8Array(event.target.result); // 这里的data里面的类型和后面的type类型要对应 var workbook = XLSX.read(data, { type: "array" }); var sheetNames = workbook.SheetNames; // 工作表名称 var worksheet = workbook.Sheets[sheetNames[0]]; // var excelData = XLSX.utils.sheet_to_json(worksheet); //JSON let html = XLSX.utils.sheet_to_html(worksheet); document.getElementsByClassName('xlsxClass')[0].innerHTML = html }; </code></pre><h1 class="pgc-h-arrow-right" data-track="20">pdf预览</h1><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code>下载包 npm install pdfjs-dist 我使用的是npm install pdfjs-dist@2.0.943版本，以下例子使用的是vue3+vite创建的项目 以下例子通过canvas来渲染pdf </code></pre><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><template> <div class="box"> <div class="tool-bar"> <div>{{ pdfParams.pageNumber }} / {{ pdfParams.total }}</div> <button type="primary" :disabled="pdfParams.pageNumber == pdfParams.total" @click="nextPage">下一页 </button> <button type="primary" :disabled="pdfParams.pageNumber == 1" @click="prevPage">上一页</button> </div> <canvas id="pdf-render"></canvas> </div> </template> </code></pre><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><script setup> import { onMounted, ref, reactive } from 'vue' const pdfParams = reactive({ pageNumber: 1, // 当前页 total: 0, // 总页数 }); // 不要定义为ref或reactive格式，就定义为普通的变量 let pdfDoc = null; // 这里必须使用异步去引用pdf文件，直接去import会报错，也不知道为什么 onMounted(async ()=> { let pdfjs = await import('pdfjs-dist/build/pdf') let pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry') pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker // 此文件位于public/test2.pdf let url = ref('/test2.pdf') pdfjs.getDocument(url.value).promise.then(doc => { pdfDoc = doc pdfParams.total = doc.numPages getPdfPage(1) }) }) // 加载pdf的某一页 const getPdfPage = (number) => { pdfDoc.getPage(number).then(page => { const viewport = page.getViewport() const canvas = document.getElementById('pdf-render') const context = canvas.getContext('2d') canvas.width = viewport.viewBox[2] canvas.height = viewport.viewBox[3] viewport.width = viewport.viewBox[2] viewport.height = viewport.viewBox[3] canvas.style.width = Math.floor(viewport.width) + 'px' canvas.style.height = Math.floor(viewport.height) + 'px' let renderContext = { canvasContext: context, viewport: viewport, // 这里transform的六个参数，使用的是transform中的Matrix(矩阵) transform: [1, 0, 0, -1, 0, viewport.height] } // 进行渲染 page.render(renderContext) }) } // 下一页功能 const prevPage = () => { if(pdfParams.pageNumber > 1) { pdfParams.pageNumber -= 1 } else { pdfParams.pageNumber = 1 } getPdfPage(pdfParams.pageNumber) } // 上一页功能 const nextPage = () => { if(pdfParams.pageNumber < pdfParams.total) { pdfParams.pageNumber += 1 } else { pdfParams.pageNumber = pdfParams.total } getPdfPage(pdfParams.pageNumber) } </script> </code></pre><p data-track="24"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">以上pdf代码引用文章：(54条消息) 前端pdf预览、pdfjs的使用_pdf.js_无知的小菜鸡的博客-CSDN博客<br>pdfjs官方代码：例子 (mozilla.github.io)<br>以上代码看不懂的地方可以查阅官方代码，大部分都是固定的写法。</span></span></p><p data-track="25"><span style="letter-spacing: 1.5px;"><strong><span style="color: #595959; --tt-darkmode-color: #595959;">「以上注意点:」</span></strong></span></p><ul><li data-track="26"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">必须异步引用pdf的文件！！！</span></span></li><li data-track="27"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">pdf演示文件位于public/test2.pdf</span></span></li><li data-track="28"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">transform: [1, 0, 0, -1, 0, viewport.height],使用了transform中的Matrix(矩阵)</span></span></li><li data-track="29"><span style="letter-spacing: 1.5px;"><span style="color: #595959; --tt-darkmode-color: #595959;">下一页和上一页功能都需要重新渲染</span></span></li></ul> </div> <div class="copynotice"> <div data-qrurl="http://www.ruisui88.com/post/521.html" class="tpureqr"></div> <div class="copynoticetxt"> <p>扫描二维码推送至手机访问。</p><p>版权声明：本文由<strong>ruisui88</strong>发布，如需转载请注明出处。</p> <p>本文链接：<a href="http://www.ruisui88.com/post/521.html">http://www.ruisui88.com/post/521.html</a></p> </div> </div> <div class="tags"> 标签: <a href='http://www.ruisui88.com/tags-25.html' title='前端下载文件流'>前端下载文件流</a> </div> <div class="sharebox"> <div class="label">分享给朋友：</div> <div class="sharebtn"> <div class="sharing" data-initialized="true"> <a href="#" class="share-icon icon-weibo">微博</a> <a href="#" class="share-icon icon-qq">QQ</a> <a href="#" class="share-icon icon-wechat">微信</a> <a href="#" class="share-icon icon-douban">豆瓣</a> <a href="#" class="share-icon icon-qzone">QQ空间</a> <a href="#" class="share-icon icon-linkedin">领英</a> </div> </div> </div> </div> <div class="pages"> <a href="http://www.ruisui88.com/category-1.html" class="backlist">返回列表</a> <p>上一篇：<a href="http://www.ruisui88.com/post/520.html" class="single-prev">StreamSaver.js入门教程:优雅解决前端下载文件的难题</a></p> <p>下一篇：<a href="http://www.ruisui88.com/post/522.html" class="single-next">springboot+vue播放视频流(无需下载，可以拖动进度、倍速播放)</a></p> </div> </div> <div class="block"> <div class="posttitle"><h4>“前端实现文件预览(pdf、excel、word、图片)” 的相关文章</h4></div> <div class="relatecon"> <div class="relate"><div class="relateinfo"> <h3><a href="http://www.ruisui88.com/post/52.html" title="Linux世界的多样性:yum和apt的对比，让你感受不同发行版的特色">Linux世界的多样性:yum和apt的对比，让你感受不同发行版的特色</a></h3> <p>yum和apt是两种常用的Linux软件包管理器，它们都可以用来安装、更新和删除软件包。但是，它们之间也有一些重要的区别，本文将对它们进行分析对比。yum是Yellowdog Updater Modified的缩写，它是基于RPM（Red Hat Package Manager）的软件包管理器，主要...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.ruisui88.com/post/71.html" title="Vue3 如何实现父子组件传值?">Vue3 如何实现父子组件传值?</a></h3> <p>在Vue 3中，要实现父子组件传值效果主要通过props和emit两种机制来实现，下面我们就来详细介绍一下这两种机制。父组件向子组件传值propsprops是Vue组件的一种机制，主要的作用就是实现从父组件向子组件传递数据值，在父组件上通过在子组件标签上定义属性来实现数据属性值的传递，在子组件中通过...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.ruisui88.com/post/131.html" title="Gitlab之间进行同步备份">Gitlab之间进行同步备份</a></h3> <p>目前，我们公司有两个研发团队，分别在北京和武汉，考虑到访问速度的问题，原有武汉的研发环境在近端部署。也就是北京和武汉分别有两套独立的研发管理环境，虽然这解决了近端访问速度的问题，但是管理上较为分散，比如研发环境备份和恢复就是最重要的问题之一。最近，处于对安全性和合规性的考虑，希望将北京和武汉的源代码...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.ruisui88.com/post/148.html" title="10款超牛Vim插件，爱不释手了">10款超牛Vim插件，爱不释手了</a></h3> <p>我是一个忠实的Vim编辑器用户，从事开发工作多年，我一直都非常喜欢使用Vim。轻量、便捷，而且，熟悉了Vim相关的快捷键之后，效率能够成倍的提升。除了这些之外，Vim像很多知名的IDE、编辑器一样，也支持插件配置，通过这些插件，可以实现更多高级、高效的操作。今天，就来给大家分享10个我特别喜欢的Vi...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.ruisui88.com/post/160.html" title="HTML5最新版本介绍">HTML5最新版本介绍</a></h3> <p>HTML5是HTML4.01和XHTML1.0之后超文本标记语言的最新版本，由一群自由思想者设计，最终实现了多媒体支持、交互性、更智能的表单和更好的语义标注。 HTML 5不只是 HTML规范的最新版本，它是用于生成现代 Web内容的一系列相关技术的总称，其中最重要的三个技术是：HTML5核心规范...</p></div> </div><div class="relate"><div class="relateinfo"> <h3><a href="http://www.ruisui88.com/post/216.html" title="vue2中路由的使用步骤，你学会了吗?">vue2中路由的使用步骤，你学会了吗?</a></h3> <p>今天我们来整理下关于vue2中路由的使用步骤：1. 导入 vue 文件和Vue-router文件(注意:vue-router是依赖vue运行的,所以一定在vue后引入vue-router)2. 定义路由组件模板3. 创建路由实例并定义路由规则4. 将路由实例挂载给Vue实例5. 在结构区域定义控制路...</p></div> </div> </div> </div> </div> <div class="sidebar fixed"> <dl id="divCatalog" class="sidebox"> <dt class="sidetitle">网站分类</dt> <dd> <ul><li><a title="技术分析" href="http://www.ruisui88.com/category-1.html">技术分析</a></li> </ul> </dd> </dl><dl id="divTags" class="sidebox"> <dt class="sidetitle">标签列表</dt> <dd> <ul><li><a title="费用系统管理" href="http://www.ruisui88.com/tags-1.html">费用系统管理<span class="tag-count"> (35)</span></a></li> <li><a title="es6新增数组方法" href="http://www.ruisui88.com/tags-32.html">es6新增数组方法<span class="tag-count"> (51)</span></a></li> <li><a title="spec.ts" href="http://www.ruisui88.com/tags-33.html">spec.ts<span class="tag-count"> (51)</span></a></li> <li><a title="vite.js" href="http://www.ruisui88.com/tags-36.html">vite.js<span class="tag-count"> (62)</span></a></li> <li><a title="linux最新版本" href="http://www.ruisui88.com/tags-38.html">linux最新版本<span class="tag-count"> (64)</span></a></li> <li><a title="macos iso镜像下载" href="http://www.ruisui88.com/tags-39.html">macos iso镜像下载<span class="tag-count"> (53)</span></a></li> <li><a title="查询优化" href="http://www.ruisui88.com/tags-40.html">查询优化<span class="tag-count"> (35)</span></a></li> <li><a title="nocache" href="http://www.ruisui88.com/tags-41.html">nocache<span class="tag-count"> (42)</span></a></li> <li><a title="nodejs更新" href="http://www.ruisui88.com/tags-42.html">nodejs更新<span class="tag-count"> (53)</span></a></li> <li><a title="feign 使用" href="http://www.ruisui88.com/tags-43.html">feign 使用<span class="tag-count"> (45)</span></a></li> <li><a title="pypy3" href="http://www.ruisui88.com/tags-44.html">pypy3<span class="tag-count"> (43)</span></a></li> <li><a title="特征衍生" href="http://www.ruisui88.com/tags-47.html">特征衍生<span class="tag-count"> (37)</span></a></li> <li><a title=".net orm框架有哪些" href="http://www.ruisui88.com/tags-48.html">.net orm框架有哪些<span class="tag-count"> (40)</span></a></li> <li><a title="pageobject" href="http://www.ruisui88.com/tags-49.html">pageobject<span class="tag-count"> (35)</span></a></li> <li><a title="img 大小" href="http://www.ruisui88.com/tags-51.html">img 大小<span class="tag-count"> (65)</span></a></li> <li><a title="android 曲线图" href="http://www.ruisui88.com/tags-53.html">android 曲线图<span class="tag-count"> (41)</span></a></li> <li><a title="windows cmd 删除文件夹" href="http://www.ruisui88.com/tags-54.html">windows cmd 删除文件夹<span class="tag-count"> (76)</span></a></li> <li><a title="objectmapper" href="http://www.ruisui88.com/tags-55.html">objectmapper<span class="tag-count"> (38)</span></a></li> <li><a title="js 防抖" href="http://www.ruisui88.com/tags-57.html">js 防抖<span class="tag-count"> (38)</span></a></li> <li><a title="centos java" href="http://www.ruisui88.com/tags-63.html">centos java<span class="tag-count"> (34)</span></a></li> <li><a title="用户代理样式表" href="http://www.ruisui88.com/tags-75.html">用户代理样式表<span class="tag-count"> (38)</span></a></li> <li><a title="h5+" href="http://www.ruisui88.com/tags-76.html">h5+<span class="tag-count"> (34)</span></a></li> <li><a title="vue弹窗组件" href="http://www.ruisui88.com/tags-77.html">vue弹窗组件<span class="tag-count"> (34)</span></a></li> <li><a title="cookie过期时间" href="http://www.ruisui88.com/tags-81.html">cookie过期时间<span class="tag-count"> (34)</span></a></li> <li><a title="esxi最新版本" href="http://www.ruisui88.com/tags-102.html">esxi最新版本<span class="tag-count"> (34)</span></a></li> </ul> </dd> </dl><dl id="divComments" class="sidebox"> <dt class="sidetitle">最新留言</dt> <dd> <ul></ul> </dd> </dl></div> </div> </div> </div> </div> <div class="footer"> <div class="fademask"></div> <div class="wrap"> <h3><a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-14</a></h3> <!--<h4>Powered By <a href="https://www.zblogcn.com/" title="Z-BlogPHP 1.7.4 Build 173420" target="_blank" rel="noopener noreferrer">Z-BlogPHP</a>. Theme by <a href="https://www.toyean.com/" target="_blank" title="拓源网">TOYEAN</a>.</h4>--> </div> </div> <div class="edgebar"> <a href="javascript:$.translatePage();" target="_self" id="zh_language" class="lang"></a> <script>var cookieDomain = "http://www.ruisui88.com/";</script> <script src="http://www.ruisui88.com/zb_users/theme/tpure/plugin/lang/zh_language.js"></script> <a href="javascript:;" target="_self" class="setnight"></a></div></body> </html><!--91.81 ms , 11 queries , 4022kb memory , 0 error-->