PDF lib 搭配 JsBarcode 实现 PDF中增加条形码

PDF lib 搭配 JsBarcode 实现 PDF中增加条形码

1. 思路：pdf中增加图片
2. 遇到的小问题：JsBarcode displayValue: false 后在pdf中仍有显示 发现隐藏的只是浏览器端
3. 解决：使用画布 位像素解决
4. 代码如下：
5. 浏览器要求：IE9+
6. fontkit为自定义字体注册工具可以百度找 common 为我的静态资源路径
7. formatNulls为我判断空值的工具类 代码在结尾

		console.log('PDFLib',PDFLib);
		const fontkit = window.fontkit;         //引入字体工具包
		const pdfDoc = await PDFLib.PDFDocument.create();
		 const fonturl = common + '/font_lib';
        const fontBytes = await fetch(fonturl).then((res) => res.arrayBuffer());
        
        pdfDoc.registerFontkit(fontkit);
        const customFont = await pdfDoc.embedFont(fontBytes);
		var canvas = document.createElement('canvas');
		
		//渲染条形码到画布
        JsBarcode(canvas, this.formatNulls
        (item.data), { displayValue: false });

		//转为 Bytes
      	var imageData = canvas.toDataURL('image/jpeg');
        const base64Data = imageData.split(',')[1];
        const binaryString = window.atob(base64Data);
        const bytes = new Uint8Array(binaryString.length);
        for (let i = 0; i < binaryString.length; i++) {
            bytes[i] = binaryString.charCodeAt(i);
        }
       const jpgImage = await pdfDoc.embedJpg(bytes);
       //设置位置 渲染进去
       page.moveTo(35, 35);
       page.drawImage(jpgImage, {
           x: 20,
           y: 10,
           width: 100,
           height: 30,
       });

formatNulls(value) { return value ? value : ''; }