pdfjs使用备忘

greatwhole 发布于2019-08-23 12:19 / 2137人阅读

摘要：介绍是一个使用构建的可移植文档格式查看器。使用的前提是浏览器要支持。由社区驱动，并得到的支持。目标是创建一个通用的，基于标准的平台，用于解析和呈现。

介绍

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"

上传



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

解析渲染



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://www.ucloud.cn/yun/98328.html

VueJs项目笔记

摘要：知识点总结一实现页面的缓存二移动端固定定位的解决方案三表单校验表单验证中文文档横向滑动的选项卡，以及输入法定位相关的插件网当第一个输入框自动获得光标的时候，弹出的输入法会把布局顶上去问题可以左右滑动的将项目中引入框架和插件当第一个输 ======================知识点总结=========================== 一、keep-alive(实现页面的缓存) ...

iliyaku 2019-08-20 18:00 评论0 收藏0
SpringBoot使用LibreOffice转换PDF

摘要：用将文档转换本例使用。在和环境下测试通过。转换命令源文件放在或者封装了一组转换命令，通过调用相关服务。安装检查已有字体库复制字体新建文件夹把系统的字体复制进去。用LibreOffice将Office文档转换PDF 本例使用 LibreOffice-6.0.4、jodconverter-4.2.0、spring-boot-1.5.9.RELEASE。在CentOS7 + ope...

mcterry 2019-08-15 18:04 评论0 收藏0
一起学设计模式 - 备忘录模式

摘要：备忘录模式常常与命令模式和迭代子模式一同使用。自述历史所谓自述历史模式实际上就是备忘录模式的一个变种。在备忘录模式中，发起人角色负责人角色和备忘录角色都是独立的角色。备忘录模式（Memento Pattern）属于行为型模式的一种，在不破坏封装特性的前提下，捕获一个对象的内部状态，并在该对象之外保存这个状态。这样就可以将该对象恢复到原先保存的状态。概述备忘录模式又叫做快照模式(...

roland_reed 2019-08-16 10:55 评论0 收藏0
使用PDF.JS插件在HTML中预览PDF文件

摘要：步骤如下下载插件下载地址文件部署建新文件夹，将插件文件放入新建的文件夹。新建在文件代码如下使用指南柠檬课件打开将文件放到下点击浏览即可。注意因为需要依赖协议。搭个服务，或者用的浏览就可以了。 PDF.js是一款基于HTML5建立的PDF阅读器，兼容大部分主流的浏览器，使用起来，也相对简单。步骤如下： 1.下载PDF.js插件下载地址：http://mozilla.github.io/...

wuyumin 2019-08-23 11:33 评论0 收藏0