我正在尝试使用
npm jspdf package
设置动态背景图像。它对我有用,但我无法设置动态背景。我正在尝试这样做
import { jsPDF } from "jspdf"
const GanetatePdf = async(name="test.pdf",html) => {
let pdf = new jsPDF('p', 'pt', 'a4');
let pWidth = pdf.internal.pageSize.width; // 595.28 is the width of a4
let srcWidth = html.scrollWidth;
let margin = 10 // narrow margin - 1.27 cm (36);
let scale = (pWidth - margin * 2) / srcWidth;
pdf.html(html, {
x: margin,
y: margin,
html2canvas: {
scale: scale,
allowTaint: true,
backgroundColor: 'white'
},
callback: async function (doc) {
//window.open(pdf.output('bloburl'));
let pageInfo = doc.internal.getCurrentPageInfo();
let totalPages = doc.internal.getNumberOfPages();
if(totalPages > 0 && totalPages > pageInfo.pageNumber){
for(let p=totalPages;p>pageInfo.pageNumber;p--){
doc.deletePage(p)
}
}
doc.save(name);
},
margin :[20, 0, 20, 0]
});
}
const html = (<div className='row mb-5 p-3 background-image'
style={{ backgroundImage: `url('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSkxORFDMPY7v_DGrlgBxnFBHtwifP9Uz28Y5-8TcNpdTwILs3E')`, "background-repeat": "repeat-y" }}>
Hello World</div>)
GanetatePdf(name="myfile.pdf",html);
使用此脚本,我可以创建带有图像的 pdf,但未加载背景图像。