pdfjs使用備忘

greatwhole 發(fā)布于2019-08-23 12:19 / 2234人閱讀

摘要：介紹是一個使用構建的可移植文檔格式查看器。使用的前提是瀏覽器要支持。由社區(qū)驅(qū)動，并得到的支持。目標是創(chuàng)建一個通用的，基于標準的平臺，用于解析和呈現(xiàn)。

介紹

PDF.js 是一個使用 HTML5 構建的可移植文檔格式（PDF）查看器。使用的前提是瀏覽器要支持 html5。
PDF.js 由社區(qū)驅(qū)動，并得到 Mozilla Labs 的支持。目標是創(chuàng)建一個通用的，基于 Web 標準的平臺，用于解析和呈現(xiàn) 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

GPU云服務器云服務器 pdfjs 備忘備忘記錄語法備忘

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/98328.html

VueJs項目筆記

摘要：知識點總結一實現(xiàn)頁面的緩存二移動端固定定位的解決方案三表單校驗表單驗證中文文檔橫向滑動的選項卡，以及輸入法定位相關的插件網(wǎng)當?shù)谝粋€輸入框自動獲得光標的時候，彈出的輸入法會把布局頂上去問題可以左右滑動的將項目中引入框架和插件當?shù)谝粋€輸 ======================知識點總結=========================== 一、keep-alive(實現(xiàn)頁面的緩存) ...

iliyaku 2019-08-20 18:00 評論0 收藏0
SpringBoot使用LibreOffice轉(zhuǎn)換PDF

摘要：用將文檔轉(zhuǎn)換本例使用。在和環(huán)境下測試通過。轉(zhuǎn)換命令源文件放在或者封裝了一組轉(zhuǎn)換命令，通過調(diào)用相關服務。安裝檢查已有字體庫復制字體新建文件夾把系統(tǒng)的字體復制進去。用LibreOffice將Office文檔轉(zhuǎn)換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
一起學設計模式 - 備忘錄模式

摘要：備忘錄模式常常與命令模式和迭代子模式一同使用。自述歷史所謂自述歷史模式實際上就是備忘錄模式的一個變種。在備忘錄模式中，發(fā)起人角色負責人角色和備忘錄角色都是獨立的角色。備忘錄模式（Memento Pattern）屬于行為型模式的一種，在不破壞封裝特性的前提下，捕獲一個對象的內(nèi)部狀態(tài)，并在該對象之外保存這個狀態(tài)。這樣就可以將該對象恢復到原先保存的狀態(tài)。概述備忘錄模式又叫做快照模式(...

roland_reed 2019-08-16 10:55 評論0 收藏0
使用PDF.JS插件在HTML中預覽PDF文件

摘要：步驟如下下載插件下載地址文件部署建新文件夾，將插件文件放入新建的文件夾。新建在文件代碼如下使用指南檸檬課件打開將文件放到下點擊瀏覽即可。注意因為需要依賴協(xié)議。搭個服務，或者用的瀏覽就可以了。 PDF.js是一款基于HTML5建立的PDF閱讀器，兼容大部分主流的瀏覽器，使用起來，也相對簡單。步驟如下： 1.下載PDF.js插件下載地址：http://mozilla.github.io/...

wuyumin 2019-08-23 11:33 評論0 收藏0