前端实现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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容