在vue中使用pdfjs-dist把pdf文件转为canvas_vue pdf转canvas-优快云博客

本文介绍了如何在Vue项目中利用pdfjs-dist库，将PDF文件转换为canvas元素。通过详细步骤，包括HTML结构设置、CSS样式应用、JavaScript函数编写以及函数调用来实现这一转换。关键步骤包括下载特定版本的pdfjs-dist库，以及展示代码片段以展示具体实现。

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

因为pdf存在分页的情况所以加了个目录，以下就是pdf转为canvas的最终成果

下载pdfjs-dist(一定要下载2.2.228版本的)

npm i pdfjs-dist@2.2.228

上代码

1、html

<template>
    <div class="pdfEditor">
        <div class="editor-pages" v-loading="loading">
                <div id="container_catalog">   
                    <div id="pop_catalog" style="text-align: center;"></div>
                </div>
        </div>
        <div class="editor-main">
            <div class="editor-drawing" @scroll="editorDrawing" v-loading="loading">
                <div id="container">   
                    <div id="pop" style="text-align: center;"></div>
                </div>
            </div>
        </div>
    </div>
</template>

2、css

$border-color:#f5f5f5;
.pdfEditor{
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    .editor-pages{
        width: 20%;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        border-right: 1px solid $border-color;
        box-sizing: border-box;
        background: #ececec;
        overflow-y: scroll;
        padding: 20px 0;
    }
    .editor-main{
        width: 80%;
        position: absolute;
        top: 0;
        left: 20%;
        bottom: 0;
        right: 0;
        .editor-header{
            width: 100%;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            border-bottom: 1px solid $border-color;
            box-sizing: border-box;
            display: flex;
            .editor-btn{