Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
exqmjmz opened this issue Nov 24, 2023 · 0 comments
Open

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

exqmjmz opened this issue Nov 24, 2023 · 0 comments
Labels
enhancement New feature or request

Comments

@exqmjmz
Copy link

exqmjmz commented Nov 24, 2023

这个是一个通过后台推荐库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

@exqmjmz exqmjmz added the enhancement New feature or request label Nov 24, 2023
@exqmjmz exqmjmz changed the title [Feat]通过jspdf生成pdf文件示例 [Feat]:通过jspdf生成pdf文件示例 Nov 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant