vue2使用pdfjs-dist批量在页面渲染pdf

最新推荐文章于 2025-05-12 09:38:20 发布

不想吃菠萝

最新推荐文章于 2025-05-12 09:38:20 发布

阅读量4.8k

点赞数 7

分类专栏： vue 文章标签： pdf vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_49582736/article/details/131600465

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

文章介绍了一个在前端展示PDF文件的方法，通过引入pdfjs-dist库，获取PDF文档内容，然后利用canvas进行渲染。在组件中，遍历每一页并将其渲染到对应的canvas元素上，同时处理了字体问题和页面初始化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要在页面上展示pdf，找了好久找到的pdfjs-dist

下载依赖（我使用的版本）

npm i pdfjs-dist@2.0.943

下面是封装的组件

template

<template>
    <div class="pdfCom">
        <canvas :id="'canvas'+item" v-for="item in pdfHTML" :key="item" />
    </div>
</template>

script

<script>
// 引入
const PDFJS = require("pdfjs-dist");
PDFJS.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.min");

export default {
    props: {
    	// 组件引入的pdf地址
        pdfUrl: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            // pdfUrl: "",
            pdfDoc: null, // pdfjs 生成的对象
            pdfHTML: 0 // pdfjs 生成的对象
        };
    },
    methods: {
        init(fileUrl) {
            let _this = this;
            PDFJS.getDocument(fileUrl).then(fileContent => {
                _this.pdfDoc = fileContent;
                _this.pdfHTML = fileContent.numPages;
                setTimeout(()=>{
                    _this.renderPage(fileContent.numPages);
                },100)
            });
        },
        renderPage(nums) {
            for (let item = 1; item <= nums; item++) {
                // 获取页面canvas节点
                let canvas = document.getElementById(`canvas${item}`);
                // 获取上下文
                const ctx = canvas.getContext("2d");
                // 获取每一页的内容
                this.pdfDoc.getPage(item).then(page => {
                    // 文件页面的视图 1倍
                    const viewport = page.getViewport(1);
                    // 将画布宽度设置为视图宽度
                    canvas.width = viewport.width;
                    canvas.height = viewport.height;

                    const renderContext = {
                        canvasContext: ctx,
                        viewport: viewport
                    };
                    console.log(renderContext);
                    // 渲染页面内容：参数是canvas画布上下文，以及文件视图
                    page.render(renderContext);
                });
            }
        }
    },
    mounted() {
        //解决字体问题
        const CMAP_URL = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.943/cmaps/";
        let obj = {};
        obj.url = this.pdfUrl; //pdf文件地址，根据情景自行修改
        obj.cMapUrl = CMAP_URL;
        obj.cMapPacked = true;
        this.init(obj);
    }
};
</script>

style

<style lang="scss" scoped>
    .pdfCom{
        width: 100%;
        height: 100vh;
    }
</style>