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

起因

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

基于上面的需求，研究了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.widthcanvas.height = viewport.height;//img1.width = viewport.width;//img1.height = viewport.height;// 渲染 PDF 页面到 canvasconst 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>