將用PDFkit製作的PDF文件發送到客戶端以進行顯示

我正在嘗試實現的心智模型出現問題，我可能完全錯誤，並且如果出現這種情況，請致歉。將用PDFkit製作的PDF文件發送到客戶端以進行顯示

我有一個完整的應用程序，我正在處理預算產品，我有一個React客戶端，它向我的服務器發送一個包含所有相關信息的預算對象，看起來像：

let budget = { 
    name: 'John Doe', 
    phone: 12345, 
    email: '[email protected]' 
    cart: [Object with name, quantity, and price of product, etc, another object that represents another product], 
    subTotal: 100, 
    tax: 12, 
    total: 112 
}

我發送數據到我的NodeJS/Express服務器中，我有PDFKit幫我創建PDF，我想將其發送回客戶端，使用戶可以下載/打印/查看PDF格式的預算，服務器中的代碼如下所示

const pdf = require('pdfkit'); 
const fs = require('fs'); 

exports.makeBudgetPDF = (req, res) => { 

    let myDoc = new pdf; 
    myDoc.pipe(res); 
    myDoc.font('Times-Roman') 
     .fontSize(12) 
     .text(`this is a test budget`); 
    myDoc.end(); 
    res.setHeader('access-control-allow-origin', '*'); 
    res.status(200); 
}

這一切都很好，我發送回客戶端與請求的響應，但我不知道如何顯示它從那裏，我得到一個數據對象（我使用axios的客戶端請求），看起來像這樣，我完全不知道該怎麼用它做

Object 
data: 
"%PDF-1.3↵%����↵5 0 obj↵<<↵/Type /Page↵/Parent 1 0 R↵/MediaBox [0 0 612 792]↵/Contents 3 0 R↵/Resources 4 0 R↵>>↵endobj↵4 0 obj↵<<↵/ProcSet [/PDF /Text /ImageB /ImageC /ImageI]↵/Font <<↵/F2 6 0 R↵>>↵>>↵endobj↵7 0 obj↵<<↵/Producer (PDFKit)↵/Creator (PDFKit)↵/CreationDate (D:20170623192634Z)↵>>↵endobj↵6 0 obj↵<<↵/Type /Font↵/BaseFont /Times-Roman↵/Subtype /Type1↵/Encoding /WinAnsiEncoding↵>>↵endobj↵2 0 obj↵<<↵/Type /Catalog↵/Pages 1 0 R↵>>↵endobj↵1 0 obj↵<<↵/Type /Pages↵/Count 1↵/Kids [5 0 R]↵>>↵endobj↵3 0 obj↵<<↵/Length 200↵/Filter /FlateDecode↵>>↵stream↵x��O9NA�����.OK#$Ȑ:C0G6��?Y�j�@�ڲ�\�g=H>є������=��R(�B�4�S��㫒(��|��P4��OT+��s8*�!�&�f�V 
��3\�g�&]`X1+��슯$�pe������bK��jK��n�?����^��m8��8s�q2K�Jv$;JS}O�����'��~.��T�↵endstream↵endobj↵xref↵0 8↵0000000000 65535 f ↵0000000448 00000 n ↵0000000399 00000 n ↵0000000505 00000 n ↵0000000119 00000 n ↵0000000015 00000 n ↵0000000300 00000 n ↵0000000208 00000 n ↵trailer↵<<↵/Size 8↵/Root 2 0 R↵/Info 7 0 R↵>>↵startxref↵777↵%%EOF↵" 

headers: 
Object 

request: 
XMLHttpRequest 

status: 
200 

statusText: 
"OK"

我已經研究了很多，但似乎無法找到答案

來源

2017-06-23 Darío Arteaga

我不熟悉與PDFKit，但一直與PDFMake。您可能需要設置響應的內容類型的報頭，類似於：

res.writeHead(200, { 
    'Content-Type': 'application/pdf', 
    'Content-disposition': 'attachment;filename=[your-filename].pdf', 
    'Content-Length': response.ContentLength 
});

這將強制在用戶的瀏覽器下載。用任何你想要命名的文件替換[your-filename]。 response.ContentLength是來自之前回調的PDF緩衝區大小，在我的示例中未顯示。將其替換爲文檔的內容大小。

只記得，我有問題管道res。您可能最終將您的PDF寫入緩衝區，然後調用：

res.end(Buffer.from([your pdf buffer]));

來源

2017-06-23 23:41:23 Chase

將用PDFkit製作的PDF文件發送到客戶端以進行顯示

回答

相關問題