mousheng / lowcoder_CN

🔥🔥🔥开源Retool, Tooljet和Appsmith的替代方案,码匠的开源版
GNU Affero General Public License v3.0
159 stars 47 forks source link

[Feat]:通过jspdf生成pdf文件示例 #64

Open exqmjmz opened 10 months ago

exqmjmz commented 10 months ago

这个是一个通过后台推荐库jspdf生成pdf文件的示例

1、通过后台安装jspdf 2、安装中文字体扩展 3、在应用新建一个js查询 4、复制代码到查询中 5、运行,将自动下载pdf

注意,jspdf没有中文字体库,需先将附件中的字体以扩展的方式安装到系统

安装完成中文字体库扩展后可以通过以下命令引入

window.font.SourceHanSansSCNormalMin

image demo代码

// Default export is a4 paper, portrait, using millimeters for units
const qrcode = 'data:image/png;base64,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'
const jsPDF = window.jspdf.jsPDF({
  orientation: 'landscape',
  unit: 'mm',
  format: [60, 30]
})
jsPDF.setFontSize(9);
jsPDF.addFileToVFS("SourceHanSansSCNormalMin.ttf", window.font.SourceHanSansSCNormalMin);
jsPDF.addFont("SourceHanSansSCNormalMin.ttf", "SourceHanSansSCNormalMin", "normal");
jsPDF.setFont("SourceHanSansSCNormalMin");
//(X,Y)
jsPDF.text(['委托编号:','WTBH2022A11A2','样品编号:','SP20221122001-'+1,'生成日期:','2022-02-03'], 27, 7)
jsPDF.addImage(qrcode, 'JPEG', 5, 5, 20, 20);
//添加后续页
for(let i=0;i<10;i++){
  jsPDF.addPage([60,30])
  jsPDF.text(['委托编号:','WTBH2022A11A2','样品编号:','SP20221122001-'+(2+i),'生成日期:','2022-02-03'], 27, 7)
  jsPDF.addImage(qrcode, 'JPEG', 5, 5, 20, 20);
}

jsPDF.save('two-by-four.pdf')

中文字体库

SourceHanSansSC-Normal-Min-normal.js.zip