如何在 webpack 和 Vuejs 中使用带有工具栏的完整 PDF.js 查看器? [英] How to use full PDF.js viewer with toolbar in webpack and Vuejs?

问题描述

我正在使用 vue.js spa 和 webpack 尝试使用 mozilla 的 PDF.js 显示 PDF.我让 examples 工作起来很轻松，但我很难通过工具栏获得完整的查看器在职的.我需要带有 require('pdfjs-dist/webpack') 的 PDFjs，因此它不会发送已设置假工人"警告.我真的找不到解释如何在 webpack 中使用完整查看器的 SO 问题/指南或视频.这个项目的文档也几乎不存在，我想我也尝试了我能在那里找到的所有内容.

抱歉，这似乎是一个愚蠢的问题，但我很努力地解决了这个问题，并点击了我可以通过谷歌搜索找到的每个链接.

先谢谢大家

我已经从示例中获得的代码:

var PDFJS = require('pdfjs-dist/webpack');const url = 'the-url-to-my-pdf';const canvasContainer = document.getElementById('preview');函数渲染页面(页面){const viewport = page.getViewport(2);let canvas = document.createElement('canvas');让 canvasWrapper = document.createElement('div');canvasWrapper.classList.add('page');const ctx = canvas.getContext('2d');const renderContext = {画布上下文:ctx，视口:视口};canvas.height = viewport.height;canvas.width = viewport.width;canvasWrapper.appendChild(canvas);canvasContainer.appendChild(canvasWrapper);page.render(renderContext);}函数 renderPages(pdfDoc) {for(var num = 1; num <= pdfDoc.numPages; num++) {pdfDoc.getPage(num).then(renderPage);}}PDFJS.getDocument(url).then(renderPages);

元素 'preview' 只是多个 pdf 页面的包装 div

解决方案

这里是一个完整的例子 - 完整的单文件 Vue 组件: