Pdf-dist

引用pdf-dist

npm install pdf-dist(注意固定版本号)

package.json版本号详解

～匹配最近小版本依赖包，比如～1.2.3会匹配所有1.2.x版本，但不包括1.3.0

^匹配最新大版本依赖包，比如^1.2.3会匹配所有1.x.x的版本，包括1.3.0，但不包括2.0.0

*意味着安装最新版本依赖包

Uncaught SyntaxError: Unexpected token <如果报这个错：

固定版本号，不同版本不同可能存在兼容问题同时使用官方建议写法

import * as pdfjs from 'pdfjs-dist'
import * as PdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

github.com/mozilla/pdf…

获取文件对象

// url必须是字符串，Uint8Array或者直接import的pdf文件（wepback添加file-loader）
const loadingTask = pdfjs.getDocument(url)
loadingTask.promise.then(pdf=>{
    # PDF 能够获取到PDF的页数
})

获得每页对象

pdf.getPage(num).then(page=>{
    # num 显示每页
    # page 就是PDF每页数据对象
})

渲染到页面

var scale = 1.5; # 缩放大小
var viewport = page.getViewport({ scale: scale, });

# 创建一个 Canvas 画布
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;

var renderContext = {
  canvasContext: context,
  viewport: viewport
};
# 把 page 信息 render 到 Canvas 中
page.render(renderContext);

动态设置缩放

# 设置默认缩放比率
const oriViewport = page.getViewport({ scale: 1 });  
const defaultScale = Math.min(maxWidth, contentWidth) / oriViewport.width; 

var desiredWidth = window.devicePixelRatio; # 设备像素比例 
# 默认缩放比率 * 设备像素比率 让渲染出来的页面更清晰，解决PDF放大缩小产生的模糊现象
  const viewport = page.getViewport({ scale: scale * devicePixelRatio });;

---

公司大佬优化pdfjs-dist使用cdn

// 校验pdf页数
if (/\.(pdf)$/i.test(newFile.name)) {
    const reader = new FileReader()
    await reader.readAsArrayBuffer(newFile.file)
    reader.onload = async () => {
      await loadScript(
        'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.8.335/build/pdf.min.js'
      )
      const pdfjsLib = window['pdfjs-dist/build/pdf']
      pdfjsLib.GlobalWorkerOptions.workerSrc =
        '//cdn.jsdelivr.net/npm/pdfjs-dist@2.8.335/build/pdf.worker.js'
      const loadingTask = pdfjsLib.getDocument(
        new Uint8Array(reader.result)
      )
      const pdfInfo = await loadingTask.promise
      if (pdfInfo.numPages && pdfInfo.numPages > 15) {
        this.$refs.upload.update(newFile, {
          error: 'limit',
          active: false,
          response: {
            error: {
              message: '页数超限',
              code: 'type'
            }
          }
        })
      }
    }
  }