pdf url 转 图片

背景：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: '', // 图片数据 URL
            pdfUrl: 'xxxxx', //你的pdf url
        }
    },
    created() {
        this.renderPdfToImage(this.pdfUrl);
    },
    methods:{  
        async renderPdfToImage(url) {
            try {
                const loadingTask = pdfjsLib.getDocument(url)
                const pdf = await loadingTask.promise
                const 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.width
                canvas.height = viewport.height

                const renderContext = {
                    canvasContext: context,
                    viewport: viewport,
                }
                await page.render(renderContext).promise

                // 导出为图片
                this.imgSrc = canvas.toDataURL('image/png')
            } catch (error) {
                console.error('PDF 转图片失败:', error)
            }
        }
    }
}
</script>