前端实现pdf翻书效果

实现原理

通过pdfjs-dist读取并解析pdf文档，把获取到的 pbf 的文件的数据流， 利用 canvas转换成图片

• pdfjs-dist版本为^4.0.379
• trun.js(实现翻页效果)

遇到的问题

问题1

pdf.js:8715 Uncaught (in promise) Error: No "GlobalWorkerOptions.workerSrc" specified.
at getWorkerSrc (pdf.js:8715)
at PDFWorker_initialize [as _initialize] (pdf.js:8798)
at new PDFWorker (pdf.js:8776)
at Object.getDocument (pdf.js:7991)
at s.loadFile (PDF.vue:88)
at mysubinfos.vue:295

import PDFJS from 'pdfjs-dist'
import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'

PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker

问题2

Class private methods are not enabled. Please add @babel/plugin-transform-private-methods to your

npm list @babel/plugin-transform-private-methods

• babel.config.js

module.exports = {
  plugins: [
    '@babel/plugin-transform-private-methods'
  ]
}

demo地址

https://gitee.com/sgr0423/pdf-trun.git