JS 将 PDF 转换为 blob

Question

function generatePDF() {
    var pdfObject = jsPDFInvoiceTemplate.default(props);
    var blob = pdfObject.OutputType(blob);
    var csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    var formData = new FormData();
    formData.append('pdfData', blob);
    // Send PDF data to Laravel controller for saving
    $.ajax({
        url: '/save-pdf',
        type: 'POST',
        data: formData,
        contentType: false, // Don't set contentType manually, let jQuery handle it
        processData: false, // Don't process the data, let jQuery handle it
        headers: {
            'X-CSRF-TOKEN': csrfToken
        },
        success: function(response) {
            // Handle success response
            console.log('PDF saved successfully. PDF ID:', response.pdfId);
        },
        error: function(xhr, status, error) {
            // Handle error response
            console.error('Error saving PDF:', error);
        }
    });
    console.log(blob);
}

使用此 javascript 时出现错误 pdfObject.OutputType(blob)。我需要获取 pdfObject （生成的 PDF）并将其发送到 php，文件将存储到数据库中。当我调试程序时，问题是未生成 blob 格式，因此没有数据传递，然后插入过程错误。

我尝试了

var blob ="testing data";

，一切都运行良好且完美

Answer 1

简短的回答，根据文档，您应该在

pdfObject.blob

下找到您的斑点

jsPDF：用 JavaScript 生成 PDF 的库（文档）

npm：jspdf-发票模板

我总是喜欢包含一个工作代码示例

<script src="https://unpkg.com/jspdf-invoice-template@latest/dist/index.js"></script>

<script>

        var props   = getprops();
        
        var pdf     = jsPDFInvoiceTemplate.default(props);
        
        console.log(pdf.blob);

        
        var window_url     = URL.createObjectURL(pdf.blob);
        window.open(window_url);

        
        /*
        
        var formData = new FormData();
        formData.append("file", blob);
        
        var res   = await fetch('/upload',{method:'post',body:formData});
        var txt   = await res.text();
        console.log(txt);
        
        */
  


        function getprops(){
        
              return {
                    outputType: 'blob',
                    returnJsPDFDocObject: true,
                    fileName: "Invoice 2021",
                    orientationLandscape: false,
                    compress: true,
                    logo: {
                        src: "https://raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/logo.png",
                        type: 'PNG', //optional, when src= data:uri (nodejs case)
                        width: 53.33, //aspect ratio = width/height
                        height: 26.66,
                        margin: {
                            top: 0, //negative or positive num, from the current position
                            left: 0 //negative or positive num, from the current position
                        }
                    },
                    stamp: {
                        inAllPages: true, //by default = false, just in the last page
                        src: "https://raw.githubusercontent.com/edisonneza/jspdf-invoice-template/demo/images/qr_code.jpg",
                        type: 'JPG', //optional, when src= data:uri (nodejs case)
                        width: 20, //aspect ratio = width/height
                        height: 20,
                        margin: {
                            top: 0, //negative or positive num, from the current position
                            left: 0 //negative or positive num, from the current position
                        }
                    },
                    business: {
                        name: "Business Name",
                        address: "Albania, Tirane ish-Dogana, Durres 2001",
                        phone: "([phone]",
                        email: "[email protected]",
                        email_1: "[email protected]",
                        website: "www.example.al",
                    },
                    contact: {
                        label: "Invoice issued for:",
                        name: "Client Name",
                        address: "Albania, Tirane, Astir",
                        phone: "([phone]",
                        email: "[email protected]",
                        otherInfo: "www.website.al",
                    },
                    invoice: {
                        label: "Invoice #: ",
                        num: 19,
                        invDate: "Payment Date: 01/01/2021 18:12",
                        invGenDate: "Invoice Date: 02/02/2021 10:17",
                        headerBorder: false,
                        tableBodyBorder: false,
                        header: [
                          {
                            title: "#", 
                            style: { 
                              width: 10 
                            } 
                          }, 
                          { 
                            title: "Title",
                            style: {
                              width: 30
                            } 
                          }, 
                          { 
                            title: "Description",
                            style: {
                              width: 80
                            } 
                          }, 
                          { title: "Price"},
                          { title: "Quantity"},
                          { title: "Unit"},
                          { title: "Total"}
                        ],
                        table: Array.from(Array(10), (item, index)=>([
                            index + 1,
                            "There are many variations ",
                            "Lorem Ipsum is simply dummy text dummy text ",
                            200.5,
                            4.5,
                            "m2",
                            400.5
                        ])),
                        additionalRows: [{
                            col1: 'Total:',
                            col2: '145,250.50',
                            col3: 'ALL',
                            style: {
                                fontSize: 14 //optional, default 12
                            }
                        },
                        {
                            col1: 'VAT:',
                            col2: '20',
                            col3: '%',
                            style: {
                                fontSize: 10 //optional, default 12
                            }
                        },
                        {
                            col1: 'SubTotal:',
                            col2: '116,199.90',
                            col3: 'ALL',
                            style: {
                                fontSize: 10 //optional, default 12
                            }
                        }],
                        invDescLabel: "Invoice Note",
                        invDesc: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary.",
                    },
                    footer: {
                        text: "The invoice is created on a computer and is valid without the signature and stamp.",
                    },
                    pageEnable: true,
                    pageLabel: "Page ",
              };
            
        }//getprops

  
</script>