当前位置：首页 > news >正文

pdf url 转图片

news 来源：原创 2025/5/14 7:02:33

背景：vue2.0需要把pdf转成图片，显示在url里面，使用pdfjs-dist来解决

步骤：

1、安装依赖包(我的项目是node12，安装太高版本会报错)

npm i pdfjs-dist@2.16.105

2、vue代码

<template><div class="main ps-r"><img id="code" v-if="imgSrc" :src="imgSrc" alt="PDF preview" /></div>
</template><script>
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';export default {data() {return {imgSrc: '', // 图片数据 URLpdfUrl: 'xxxxx', //你的pdf url}},created() {this.renderPdfToImage(this.pdfUrl);},methods:{  async renderPdfToImage(url) {try {const loadingTask = pdfjsLib.getDocument(url)const pdf = await loadingTask.promiseconst page = await pdf.getPage(1) // 获取第 1 页const viewport = page.getViewport({ scale: 2 }) // 缩放比例const canvas = document.createElement('canvas')const context = canvas.getContext('2d')canvas.width = viewport.widthcanvas.height = viewport.heightconst renderContext = {canvasContext: context,viewport: viewport,}await page.render(renderContext).promise// 导出为图片this.imgSrc = canvas.toDataURL('image/png')} catch (error) {console.error('PDF 转图片失败:', error)}}}
}
</script>