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

news2025/6/10 13:31:26

起因

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

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

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

实例1 存图片模式

<!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格式

<!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>