【前端】Vue中实现pdf逐页转图片，图片再逐张提取文字

普通老人2025-06-02 20:38

给定场景：后端无法实现pdf转文字，由前端实现"pdf先转图片再转文字"。

方法：

假设我们在< template>中有一个元素存放我们处理过的canvas集合

bash 复制代码

<div id="canvasIDpdfs" />

我们给定一个按钮，编写click函数，通过点击按钮触发pdf先转图片再转文字的功能

bash 复制代码

this.pdfdata()

在< script>里编写函数

javascript 复制代码

pdfdata() {
    const url = pdf路径;

    if (url) {
        const that = this;
        const canvasID = document.getElementById('canvasIDpdfs');
        // 引入插件库PDFJS
        PDFJS.getDocument({
            url,
            httpHeaders: {
                token: that.$cookie.get('token'),
            },
        }).then((pdfDoc_) => {
            if (pdfDoc_) {
                // 清空canvas
                canvasID.innerHTML = '';
                // 清空富文本
                this.editor.txt.clear();
                // 赋值
                that.pdfDoc = pdfDoc_;
                // 别名
                const pdfDoc = pdfDoc_;
                // 逐页
                for (let i = 1; i <= pdfDoc.numPages; i++) {
                    // 传入页码与画布
                    that.renderPage(i, canvasID);
                }
            }
        }).catch((e) => {
            console.log(`获取pdf文件失败，${e} `);
        });
    }
},

renderPage(num, canvasID) {
    // 使用PDFJS能力
    this.pdfDoc.getPage(num).then((page) => {
        // 所有画布容器
        const canvasList = canvasID;
        // 新画布
        const canvas = document.createElement('canvas');
        // 存新画布
        canvasList.appendChild(canvas);
        // 绘图
        const ctx = canvas.getContext('2d');
        // 缩放
        const viewport = page.getViewport(1.5);
        // 尺寸
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        // 使用PDFJS能力
        const renderContext = {
            canvasContext: ctx,
            viewport,
        };
        // 使用PDFJS能力
        const renderTask = page.render(renderContext);
        renderTask.promise.then(() => {
            // 新画布已绘制完成
            const latestCanvas =
                document.getElementById('canvasIDpdfs').getElementsByTagName('canvas')[num - 1].toDataURL("image/jpeg");
            // 对其进行图片转文字
            axios({
                url: 图片转文字的服务API,
                method: 'post',
                headers: {
                    'Content-Type': 'application/json',
                    token: Cookies.get('token'),
                },
                data: {
                    image: latestCanvas.split('data:image/jpeg;base64,')[1],
                },
            }).then((res) => {
                // 得到文字
                if (res.result
                    && res.result > 0
                ) {
                    res.result.forEach((m) => {
                        // 自定义样式
                        const style = '';
                        // 文字添加到富文本
                        this.editor.txt.append(`<p style="${style}">${m.words}</p>`);
                    });
                }
            });
        });
    });
},