【前端】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>`);
                    });
                }
            });
        });
    });
},
相关推荐
用户4099322502129 分钟前
FastAPI的查询白名单和安全沙箱机制如何确保你的API坚不可摧?
前端·后端·github
前端小巷子18 分钟前
深入 npm 模块安装机制
前端·javascript·面试
软件工程小施同学30 分钟前
计算机学报 2025年 区块链论文 录用汇总 附pdf下载
pdf·区块链
cypking1 小时前
electron中IPC 渲染进程与主进程通信方法解析
前端·javascript·electron
西陵2 小时前
Nx带来极致的前端开发体验——借助playground开发提效
前端·javascript·架构
Britney⁺♛&?ꪶꪫꪜꫀ2 小时前
Vue2上
vue.js·npm
江城开朗的豌豆2 小时前
Element UI动态组件样式修改小妙招,轻松拿捏!
前端·javascript·vue.js
float_六七2 小时前
JavaScript:现代Web开发的核心动力
开发语言·前端·javascript
zhaoyang03013 小时前
vue3笔记(2)自用
前端·javascript·笔记
德育处主任Pro3 小时前
# JsSIP 从入门到实战:构建你的第一个 Web 电话
前端