vue，js，html，识别带二维码的发票前端支持pdf转图片

灿烂又孤独的神

已于 2023-10-18 16:27:51 修改

阅读量2.5k

点赞数 3

文章标签： javascript 前端 vue.js html

于 2023-09-16 12:10:58 首次发布

本文链接：https://blog.csdn.net/hahehes/article/details/132915654

版权

由于业务需求需要做一个发票识别内容，然后就有了这个文章。首先这个思路是识别图片上的二维码信息，扫码二维码之后，我们就可以得到发票的基础信息：1、发票类型；2、发票代码；3、发票号码；4、发票效验码；5、发票开具时间；6、发票金额。这些信息就是发票二维码包含的所有的信息了。

其中使用的前端插件：qrcode-decoder，pdfjs-dist（如果你不考虑识别pdf的内容也可以忽略此内容）。

监听文件发生改变

<el-upload
	class="upload-demo mt5"
	style="height: 268px; width: 99%"
	drag
	:show-file-list="false"
	:auto-upload="false"
	action="#"
	method="POST"
	ref="fileUploadRef"
	accept=".pdf,.jpg,.png,.jpeg"
	:on-change="fileChange"
>
	<el-icon class="el-icon--upload" style="font-size: 90px; line-height: 90px">
		<upload-filled />
	</el-icon>
	<div class="el-upload__text">拖拽或点击上传发票 <em>仅能自动识别支持带有二维码的发票</em></div>
	<div class="el-upload__text">支持格式：pdf、jpg、png等文件</div>
</el-upload>

2.监听方法

async function fileChange(rawFile) {
	let fileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg', 'application/pdf'];
	if (!fileTypes.includes(rawFile.raw.type)) {
		console.log('存在不支持的格式');
		return false;
	}
    // ts写法 可换成this
	imgUrl.value = null;
	pdfUrl.value = null;
    // 可以用于在浏览器上预览本地图片或者视频,文件
	let fileUrl &