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

news2025/6/4 15:56:28

给定场景:后端无法实现pdf转文字,由前端实现“pdf先转图片再转文字”。

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

<div id="canvasIDpdfs" />

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

this.pdfdata()

在< script>里编写函数

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>`);
                    });
                }
            });
        });
    });
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2396164.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python使用

Python学习&#xff0c;从安装&#xff0c;到简单应用 前言 Python作为胶水语言在web开发&#xff0c;数据分析&#xff0c;网络爬虫等方向有着广泛的应用 一、Python入门 相关基础语法直接使用相关测试代码 Python编译器版本使用3以后&#xff0c;安装参考其他教程&#xf…

分类预测 | Matlab实现CNN-LSTM-Attention高光谱数据分类

分类预测 | Matlab实现CNN-LSTM-Attention高光谱数据分类 目录 分类预测 | Matlab实现CNN-LSTM-Attention高光谱数据分类分类效果功能概述程序设计参考资料 分类效果 功能概述 代码功能 该MATLAB代码实现了一个结合CNN、LSTM和注意力机制的高光谱数据分类模型&#xff0c;核心…

【解决方案-RAGFlow】RAGFlow显示Task is queued、 Microsoft Visual C++ 14.0 or greater is required.

目录 一、长时间显示&#xff1a;Task is queued 二、GraphRAG消耗大量Token 三、error: Microsoft Visual C 14.0 or greater is required. Get it with “Microsoft C Build Tools“ 四、ModuleNotFoundError: No module named infinity.common; infinity is not a package 五…

爬虫到智能数据分析:Bright Data × Kimi 智能洞察亚马逊电商产品销售潜力

前言 电商数据分析在现代商业中具有重要的战略价值&#xff0c;通过对消费者行为、销售趋势、商品价格、库存等数据的深入分析&#xff0c;企业能够获得对市场动态的精准洞察&#xff0c;优化运营决策&#xff0c;预测市场趋势、优化广告投放、提升供应链效率&#xff0c;并通…

高级前端工程师必备的 JS 设计模式入门教程,常用设计模式案例分享

目录 高级前端工程师必备的 JS 设计模式入门教程&#xff0c;常用设计模式案例分享 一、什么是设计模式&#xff1f;为什么前端也要学&#xff1f; 1、设计模式是什么 2、设计模式的产出 二、设计模式在 JS 里的分类 三、常用设计模式实战讲解 1、单例模式&#xff08;S…

2023年电赛C题——电感电容测量装置

一、赛题 二、题目分析——损耗角正切值 对于一个正常的正弦波信号&#xff0c;如果通过的是一个电阻或一条导线&#xff0c;那么它的电流信号和电压信号是一致的&#xff08;有电压才有电流&#xff09;&#xff0c;没有相位差。 但是如果正弦波经过了一个电感或电容&#xf…

pycharm打印时不换行,方便对比观察

原来&#xff1a; 优化&#xff1a; import torch torch.set_printoptions(linewidth200) 优化结果&#xff1a;

因泰立科技:镭眸T51激光雷达,打造智能门控新生态

在高端门控行业&#xff0c;安全与效率是永恒的追求。如今&#xff0c;随着科技的飞速发展&#xff0c;激光雷达与TOF相机技术的融合&#xff0c;为门控系统带来了前所未有的智能感知能力&#xff0c;开启了精准守护的新时代。因泰立科技的镭眸T51激光雷达&#xff0c;作为这一…

Microsoft Fabric - 尝试一下Data Factory一些新的特性(2025年5月)

1.简单介绍 Microsoft Fabric是微软提供的一个数据管理和分析的统一平台&#xff0c;感觉最近的新特性也挺多的。 Data Factory是Microsoft Fabric的一个功能模块&#xff0c;也是一个cloud service。Data Factory可以和多种数据源进行连接&#xff0c;同时提供了data movemen…

【前端】javascript和Vue面试八股

面试暂时没有遇到过考这么深的&#xff0c;一般还是问一些生命周期和性能相关。 Q&#xff1a;什么情况下“ a 1 && a 2 && a 3 ”同时成立 A&#xff1a;对象的valueOf与toString方法&#xff1a;当一个对象与一个原始值&#xff08;如数字&#xff09;进…

WEB3——区块链留言板(留言上链),查看web3日志-入门项目推荐

区块链留言板&#xff08;留言上链&#xff09; 目标&#xff1a;构建一个用户可以“写入留言、读取历史留言”的 DApp。 内容&#xff1a; Solidity 编写留言合约&#xff0c;存储留言内容和发送者地址。 提供 API&#xff1a; GET /messages&#xff1a;获取留言列表 POST…

【配置vscode默认终端为git bash】

配置vscode默认终端为git bash 点击左下角小齿轮&#xff0c;点击设置&#xff0c;搜索terminal.integrated.profiles.windows&#xff0c;点击在setting.json中编辑 第一部分是当前的所有的终端&#xff0c;第二部分是配置默认的终端"terminal.integrated.defaultProfi…

Cypress + TypeScript + Vue3

🚀 从零构建 Cypress + TypeScript + Vue3 组件测试环境【详细实战教程】 组件测试是前端开发中不可忽视的一环,它能够帮助我们在开发阶段就发现 UI 与交互逻辑问题。本文将带你手把手搭建基于 Cypress + TypeScript + Vue3 的组件测试环境,包含完整目录结构、配置文件、组…

深入解析 IP 代理:原理、应用场景与优化策略

在当今数字化时代&#xff0c;网络通信的安全性与隐私保护成为人们日益关注的焦点&#xff0c;而 IP 代理作为网络技术领域的一个重要概念&#xff0c;正扮演着愈发关键的角色。本文将深入剖析 IP 代理的原理、广泛的应用场景以及如何对其进行优化&#xff0c;以期为读者提供有…

58、辣椒种植学习

辣椒&#xff08;学名&#xff1a;Capsicum annuum&#xff09;属于茄科辣椒属&#xff0c;是一种重要的蔬菜兼调味作物&#xff0c;具有较高的经济价值和营养价值。其果实富含维生素C、辣椒素等成分&#xff0c;既可鲜食&#xff0c;也可加工成干辣椒、辣椒粉、辣椒酱等产品&a…

【SpringBoot】零基础全面解析SpringBoot配置文件

本篇博客给大家带来的是SpringBoot配置文件的知识点, 有properties 配置文件 和 yml 配置文件, 目前主流的是yml,所以本文以 重点讲解 yml 配置文件. &#x1f40e;文章专栏: JavaEE进阶 &#x1f449;gitte链接: 薯条不要番茄酱 &#x1f680;若有问题 评论区见 ❤ 欢迎大家点…

python:PyMOL 能处理 *.pdb 文件吗?

PyMOL 完全可以打开并处理 PDB&#xff08;Protein Data Bank&#xff09;文件&#xff0c;这是 PyMOL 最主要的功能之一。PDB 格式是结构生物学领域的标准文件格式&#xff0c;专门用于存储生物大分子&#xff08;如蛋白质、核酸&#xff09;的三维结构数据。 在 PyMOL 中打开…

GNSS终端授时之四:高精度的PTP授时

我们在GNSS终端的授时之三&#xff1a;NTP网络授时中介绍了NTP网络授时的基本原理。我们知道了NTP授时的精度跟网络环境相关&#xff0c;即使在局域网中NTP授时的精度也只能到ms级别。如果广域网&#xff0c;经过多级交换机&#xff0c;路由器&#xff0c;由于传输路径和延时的…

PHP与MYSQL结合中中的一些常用函数,HTTP协议定义,PHP进行文件编程,会话技术

MYSQL&#xff1a; 查询函数: 执行查询语句: 1.mysql_query("SQL语法"); 凡是执行操作希望拿到数据库返回的数据进行展示的(结果返回: 数据结果); 2.执行结果的处理:成功为结果集&#xff0c;失败为false; 成功返回结果:SQL指令没有错误&#xff0c;但是查询结果…

OpenCV计算机视觉实战(9)——阈值化技术详解

OpenCV计算机视觉实战&#xff08;9&#xff09;——阈值化技术详解 0. 前言1. 全局阈值与自适应阈值2. Otsu 算法3. 实战案例&#xff1a;文档扫描中的二值化处理4. 算法对比小结系列链接 0. 前言 在图像处理领域&#xff0c;阈值化 (Binarization) 技术就像一把魔术剪刀&…