网页端 js 读取发票里的二维码信息(图片和PDF格式)

起因

为了实现在报销流程中,发票不能重用的限制,发票上传后,希望能读出发票号,并记录发票号已用,下次不再可用于报销。

基于上面的需求,研究了OCR 的方式和读PDF的方式,实际是可行的,但是因为都是使用了本地化的组件库,只能在服务器端实现。对于目前 OA 流程的使用并不方便。又研究了一下 JS 的处理办法,找到了两个脚本库,可以使用。jsQR.js 和 pdf.js ,可以通过识别发票里的二维码间接取到发票号。

下面做了两个简单使用的例子,验证的可行性。记录一下备用。

实例1 存图片模式

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读发票的二维码信息-图片版</title>
    <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
</head>
<body>
<div style="height: 300px">点击图片识别图中二维码信息</div>
<img id="img1"   alt="QR Code" onload="showqr()" onclick="showqr()">
</body>
<script>
    const picfUrl = './fapiao.png'; // 替换为你的 发票 图片 文件路径
    function showqr()
    {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    canvas.width = img1.width;
    canvas.height = img1.height;
    context.drawImage(img1, 0, 0);
    const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    const code = jsQR(imageData.data, imageData.width, imageData.height);
    alert(code.data);
    }
    img1.src=picfUrl
</script>
</html>

实例2 PDF格式

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读发票二维码信息-pdf版</title>
    <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
</head>
<body>
<div style="height: 300px">点击图片识别图中二维码信息</div>
<img id="img1" alt="QR Code" onclick="showqr()" onload="showqr()">
<script>
    const pdfUrl = './fapiao.pdf'; // 替换为你的 发票 PDF 文件路径

    // 加载 PDF 文件
    pdfjsLib.getDocument(pdfUrl).promise.then(pdfDoc => {
        console.log(`PDF 文件加载成功,共 ${pdfDoc.numPages} 页`);
        renderPage(pdfDoc, 1); //测试只取第一页内容
    });

    // 渲染指定页码的函数
    function renderPage(pdfDoc, pageNumber) {
        pdfDoc.getPage(pageNumber).then(page => {
            const scale = 1; // 放大,可以增加二维码清晰度
            const viewport = page.getViewport({scale});

            // 创建 canvas 元素
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            canvas.width = viewport.width
            canvas.height = viewport.height;
            //img1.width = viewport.width;
            //img1.height = viewport.height;

            // 渲染 PDF 页面到 canvas
            const renderContext = {
                canvasContext: context,
                viewport
            };

            page.render(renderContext).promise.then(() => {
                const imageData = canvas.toDataURL('image/png');
                img1.src = imageData;
            });
        });
    };

    function showqr() {
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        context.drawImage(img1, 0, 0);
        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
        console.log(imageData)
        const code = jsQR(imageData.data, imageData.width, imageData.height);
        alert(code.data);
    }
</script>
</body>
</html>
相关推荐
NON-JUDGMENTAL8 小时前
《Local_Pdf_Chat_RAG 深度学习笔记:PDF 本地化对话的 RAG 原理与实践》
笔记·pdf
Metaphor6928 小时前
Java 旋转 PDF 页面:使用 Spire.PDF 实现高效页面处理
java·经验分享·pdf
拓端研究室11 小时前
专题:2025零售数字化与即时零售竞争洞察报告|附130+份报告PDF、数据仪表盘汇总下载
pdf·零售
精致先生1 天前
多模态PDF解析
pdf·大模型·rag
啦啦9117142 天前
Print Conductor打印软件安装教程!一款非常好用的批量打印软件!支持PDF、Word、Excel、图片等
pdf·excel
yz17800414102 天前
window pdf文件批量转高清图片png、jpg
pdf·bash
老歌老听老掉牙3 天前
PDF转图片工具:基于PyQt5的完整实现与深度解析
python·qt·pdf
winfredzhang3 天前
python图片处理与PDF生成程序详解
python·pdf·图片·解压
vectorlogic3 天前
万兴PDF专家免费版下载安装教程
其他·pdf
伊织code3 天前
python-poppler - PDF文档处理Python绑定库
开发语言·python·pdf·python-poppler