PDF

页面内嵌 PDF 预览

方案1:使用浏览器自带插件

优点:不引入外部依赖,开发工作量可忽略。

缺点:

  1. 兼容性,目前主流浏览器都支持。不支持(IE)会转为下载。
  2. 不支持流式加载,适合较小 PDF

1. iframe

警告 Resource interpreted as Document but transferred with MIME type application/pdf

   <iframe v-if="isSupportPDF()" :src="url" frameborder="0"></iframe>
   <a v-else class="link" :href="url" target="_blank" >下载(仅电脑端)</a>
// util
function isSupportPDF() {
   var hasPDFViewer = false;
   try {
      var pdf =
         navigator.mimeTypes &&
         navigator.mimeTypes["application/pdf"]
         ? navigator.mimeTypes["application/pdf"].enabledPlugin
         : 0;
      if (pdf) hasPDFViewer = true;
   } catch (e) {
      if (navigator.mimeTypes["application/pdf"] != undefined)
         hasPDFViewer = true;
   }

   return hasPDFViewer;
   }

2. embed,不支持回退

<embed src="/index.pdf" type="application/pdf" width="100%" height="100%" />

如何隐藏工具栏:在 pdf url 后追加参数#toolbar=0

asp.net mvc - Resource interpreted as Document but transferred with MIME type application/pdf - Stack Overflowopen in new window

inline pdfopen in new window前端预览PDF总结:iframe、embed、PDFObject、PDF.js - ruanhongbiao的专栏 - CSDN博客open in new window

方案2: pdf.js

核心使用 canvas 渲染,支持 IE

优点:

  1. 支持 IE
  2. 保持各平台 UI 一致,可定制性强
  3. 可以支持流式加载,大文件首屏可更早渲染

缺点:

  1. 需要等待 pdf.js 下载和初始化
  2. 开发工作量较大

pdfjs viewer 开发小结 - 网易云 - 博客园open in new window

Last Updated:
Contributors: cyio