【前端】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>`);
                    });
                }
            });
        });
    });
},
相关推荐
布兰妮甜10 分钟前
单例模式在前端(JavaScript)中的实现与应用
前端·javascript·单例模式
Mintopia11 分钟前
Three.js 加载模型文件:从二进制到像素的奇幻漂流
前端·javascript·three.js
前端小巷子29 分钟前
跨域问题解决方案:JSONP
前端·javascript·面试
eric*168837 分钟前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
程序员爱钓鱼1 小时前
Go语言中的反射机制 — 元编程技巧与注意事项
前端·后端·go
GIS之路1 小时前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴1 小时前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥1 小时前
HTML之表单结构全解析
前端·html
聪聪的学习笔记2 小时前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er2 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端