vue中使用pdf.js下载

要在vue中使用pdf.js下载，可以按照以下步骤： 1. 首先安装pdf.js，可以使用npm install pdfjs-dist命令进行安装。 2. 在vue组件中引入pdf.js，可以使用import pdfjsLib from 'pdfjs-dist'命令进行引入。 3. 使用pdf.js提供的API加载PDF文件并渲染到页面上。 4. 在加载PDF文件时添加参数responseType: 'arraybuffer'，以确保正确加载PDF文件。 下面是一个简单的例子： ```javascript <template> <div> <canvas ref="canvas"></canvas> <button @click="downloadPDF">下载PDF</button> </div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { name: 'PDFDownloader', data() { return { pdfDoc: null, pageNum: 1, pageRendering: false, canvas: null, ctx: null } }, mounted() { this.canvas = this.$refs.canvas this.ctx = this.canvas.getContext('2d') this.renderPage(1) }, methods: { renderPage(num) { this.pageRendering = true // 使用pdf.js提供的API加载PDF文件 pdfjsLib.getDocument('pdf_path').promise.then(pdfDoc_ => { this.pdfDoc = pdfDoc_ return this.pdfDoc.getPage(num) }).then(page => { var viewport = page.getViewport({scale: 1}) this.canvas.height = viewport.height this.canvas.width = viewport.width var renderContext = { canvasContext: this.ctx, viewport: viewport } page.render(renderContext).promise.then(() => { this.pageRendering = false }) }) }, async downloadPDF() { // 加载PDF文件时添加参数responseType: 'arraybuffer' const response = await fetch('pdf_path', { method: 'GET', headers: { 'Content-Type': 'application/pdf' }, responseType: 'arraybuffer' }) const blob = new Blob([response.data], {type: 'application/pdf'}) const url = window.URL.createObjectURL(blob) const link = document.createElement('a') link.href = url link.download = 'download.pdf' document.body.appendChild(link) link.click() document.body.removeChild(link) } } } </script> ```