vue实现pdf文件的在线预览

我是通过标签就可以满足我工作的 pdf预览需求如果<iframe> 无法满足需求，可以使用</code>pdf.js<code>这个插件，功能强大。</code></p> <pre><code class="hljs haskell"><iframe :src=<span class="hljs-string">"url" <span class="hljs-class"><span class="hljs-keyword">type="application/x-google-chrome-pdf" width=<span class="hljs-string">"100%" height=<span class="hljs-string">"100%" /> <span class="hljs-title">export <span class="hljs-keyword">default { <span class="hljs-class"><span class="hljs-keyword">data() { <span class="hljs-title">return { <span class="hljs-title">url: ``, }; } <span class="hljs-title">mounted() { this.url=`http://<span class="hljs-number">192.168<span class="hljs-number">.1<span class="hljs-number">.110:<span class="hljs-number">5000/assets/doc/xx调度方案<span class="hljs-number">7.pdf`; } </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre> <h4 id="游览器中在线的内容">游览器中在线的内容</h4> <p></p> <h4 id="这是控制台中有关pdf的内容">这是控制台中有关pdf的内容</h4> <p></p> <p><code>可以看到，之前的 <iframe /> 标签被替换成<embed> , 而且游览器会自动增加相关pdf的插件</code></p> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid239-0.html' class='tagbtn' target='_blank'>vue</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565979.html">创建vue项目的第一步——之安装vue 命令更新了</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565990.html">vue打包报错</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-565272.html">vue登录页面后台返回验证码图片</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564641.html">Java web开发：从零到 Run 一个现有的 Spring Boot 前后端分离项目（前端Vue）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564897.html">vue axios 1 创建项目及简单配置axios</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564552.html">vue两层list循环后，内层循环页面选择类型</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-564506.html">HMVue1.5【Source Map】</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-563914.html">vue代理服务器proxy详情配置信息</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562341.html">[转]Vue-cli3.x引入本地json报404 解决方案</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-562421.html">[转]Vue CLI 3搭建vue+vuex 最全分析</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561824.html">AntDesign vue学习笔记（三）嵌套路由使用</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-561925.html">vue 多项目部署---二级目录</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>