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

给定场景:后端无法实现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>`);
                    });
                }
            });
        });
    });
},
相关推荐
给月亮点灯|8 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之9 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
Access开发易登软件9 小时前
Access开发导出PDF的N种姿势,你get了吗?
后端·低代码·pdf·excel·vba·access·access开发
蔗理苦10 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro10 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹11 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风11 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱11 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年11 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划