pdfjs使用备忘

2018-10-13 admin

介绍

PDF.js 是一个使用 HTML5 构建的可移植文档格式(PDF)查看器。使用的前提是浏览器要支持 html5。 PDF.js 由社区驱动,并得到 Mozilla Labs 的支持。 目标是创建一个通用的,基于 Web 标准的平台,用于解析和呈现 PDF。

文档,demo

pdfjs

demo

浏览器兼容性

The goal is to support all HTML5 compliant browsers, but sincefeature support varies per browser/version our support for all PDF featuresvaries as well. If you want to support more browsers than Firefox you’ll needto include compatibility.jswhich has polyfills for missing features. Find the list offeatures needed for PDF.js to properly work and browser tests for thosefeatures at RequiredBrowser Features. In general, the support is below:

我们的目标是支持所有 HTML5 兼容的浏览器,但是每个浏览器/版本对 PDF 的所有特性的支持是不同的。如果你想支持除了 Firefox 以外的更多种浏览器,你需要有 compatibility.js 文件,它有 polyfills 丢失的功能。想查找 PDF.js 正常工作所需的浏览器的测试要求,请参考如下浏览器特性的列表:

使用核心代码

安装 npm install pdfjs-dist

引入 import PDFJS from 'pdfjs-dist'

上传

<input type="file" accept=".pdf" :id="uniqueId" @change="onFileChange" ref="file" class="inputfile"/>

onFileChange() {
  const file = this.$refs.file.files[0];
  this.fileName = file ? file.name : '请选择文件';
  this.file = file
}

解析渲染

<div id="pdf-viewer"></div>

extractPdfContent() {
  if(this.file.type != "application/pdf"){
    console.error(this.file.name, "is not a pdf file.")
    return
  }

  var fileReader = new FileReader();

  fileReader.onload = function() {
    var typedarray = new Uint8Array(this.result);
    var pdfContainer = document.getElementById('pdf-viewer');
    PDFJS.getDocument(typedarray).then(function(pdf) {
      // you can now use *pdf* here
      let arr = []
      for(let i = 1; i<= pdf.numPages;i++) {
        arr.push(pdf.getPage(i))
      }
      //这里的处理是为了避免pdf渲染乱序
      Promise.all(arr).then(function(pages) {
        for(let j = 0; j< pdf.numPages;j++) {
          let page = pages[j]
          var viewport = page.getViewport(2.0);
          var canvasNew = document.createElement('canvas');
          canvasNew.style.width = '100%';
          canvasNew.id = `pdf_${page.pageNumber}`;
          canvasNew.height = viewport.height;
          canvasNew.width = viewport.width;

          page.render({
            canvasContext: canvasNew.getContext('2d'),
            viewport: viewport
          });
          pdfContainer.appendChild(canvasNew)
        }
      });
    })
  }
  fileReader.readAsArrayBuffer(this.file);
}

参考资料

https://mozilla.github.io/pdf… How to render a full PDF using Mozilla’s pdf.js

[转载]原文链接:https://segmentfault.com/a/1190000016671499

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-42618.html

文章标题:pdfjs使用备忘

相关文章
[翻译]基于Webpack4使用懒加载分离打包React代码
原文地址:https://engineering.innovid.com/code-splitting-using-lazy-loading-with-react-redux-typescript-and-webpack-4-3ec601...
2018-03-11
Bootstrap table简单使用总结
最近接触一个很棒的插件,Bootstrap table没做过前端的表示对table的印象还只停留在html的table标签那一套,用过bootstrap table之后不得不说真的很实用。 构造方式 1 、HTML &lt;div clas...
2017-03-17
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
vue使用watch 观察路由变化,重新获取内容
问题背景: 点击用户头像 =&gt; 进入用户个人中心,在用户个人中心里点击其他用户的头像,我希望显示被点击用户的个人中心,但只看到了路由参数在发生变化,页面内容并没有更新。如图: 页面代码如下: &lt;script&gt; exp...
2017-03-13
js使用split函数按照多个字符对字符串进行分割的方法
本文实例讲述了js使用split函数按照多个字符对字符串进行分割的方法。分享给大家供大家参考。具体分析如下: js中的split()函数可以对字符串按照指定的符号进行分割,但是如果字符串中存在多个分割符号,js的split()函数是否还可以...
2017-03-21
如何使用JavaScript
一、应用&lt;script&gt;标签加入JavaScript 任何脚本语言均可以通过&lt;script&gt;…&lt;/script&gt;标记对加入到HTML代码中(即是加入到网页文档&lt;html&gt;…&lt;/html&...
2015-11-12
ajax教程之ajax使用Http请求
ajax中是如何让使用http请求的呢? 在传统的JS编程中,如果您希望从服务器上的文件或数据库中得到任何的信息,或者向服务器发送信息的话,就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发...
2015-11-12
使用 Protocol Buffers 代替 JSON 的五个原因
在 Ruby 和 Rails 开发者中,面向服务 (Service-Oriented) 架构有一个当之无愧的名声,它是一个缓解程序规模恶性增长的一个强有力的途径,可在大量应用程序中提取关注点。这些新生小巧的服务通常继续使用 Rails 或 ...
2016-01-13
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { &quot;list&quot;: [ { pagePath: &quot;pages&#x2F;index&#x2F;main&quot;, iconPath: &...
2018-05-25
回到顶部