我们如何使用 jspdf 在 PDF 中设置多个背景图像?

问题描述 投票:0回答:0

我正在尝试使用

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,但未加载背景图像。

javascript reactjs jspdf
© www.soinside.com 2019 - 2024. All rights reserved.