angularjs - 使用 pdfMake 通过 Node Express 将 PDF 内容返回到浏览器

标签 angularjs node.js pdfmake

我正在使用 pdfmake用于在我的 node express 应用程序中生成 PDF 文档的库,并希望将这些文档直接发送回客户端以触发浏览器自动下载文件。

作为引用,我一直在为我的快速中间件使用以下示例:

https://gist.github.com/w33ble/38c5e0220d491148de1c
https://github.com/bpampuch/pdfmake/issues/489

我选择发回缓冲响应,所以我的中间件的关键部分如下所示:

function createPDFDocument(docDefinition, callback) {
  var fontDescriptors = {
    Roboto: {
      normal: './src/server/fonts/Roboto-Regular.ttf',
      bold: './src/server/fonts/Roboto-Medium.ttf',
      italics: './src/server/fonts/Roboto-Italic.ttf',
      bolditalics: './src/server/fonts/Roboto-MediumItalic.ttf'
    }
  };

  var printer = new Printer(fontDescriptors);
  var pdfDoc = printer.createPdfKitDocument(docDefinition);

  // buffer the output
  var chunks = [];

  pdfDoc.on('data', function(chunk) {
    chunks.push(chunk);
  });
  pdfDoc.on('end', function() {
    var result = Buffer.concat(chunks);
    callback(result);
  });
  pdfDoc.on('error', callback);

  // close the stream
  pdfDoc.end();

}

在我的 angular 应用程序中,我使用了 $resource 服务并定义了一个端点,如下所示:
this.resource = $resource('api/document-requests/',
    null,
    <any>{
        'save': {
            method: 'POST',
            responseType: 'arraybuffer'
        }
});

当我尝试这个时,我没有得到任何浏览器下载,我在 Chrome 中查看时收到的响应如下:

enter image description here

响应头如下:

enter image description here

所以看起来我不是一百万英里,我已经搜索并找到了提到转换为 Blob 的解决方案,但我认为这只有在我提供文档的 Base64 编码字符串时才相关。

任何人都可以建议我的问题在这里吗?

谢谢

最佳答案

这是一个路由器:

router.get('/get-pdf-doc', async (req, res, next)=>{ try {
    var binaryResult = await createPdf();
    res.contentType('application/pdf').send(binaryResult);
} catch(err){
    saveError(err);
    res.send('<h2>There was an error displaying the PDF document.
      '</h2>Error message: ' + err.message);
}});

这是一个返回pdf的函数。
const PdfPrinter = require('pdfmake');
const Promise = require("bluebird");

createPdf = async ()=>{
  var fonts = {
    Helvetica: {
        normal: 'Helvetica',
        bold: 'Helvetica-Bold',
        italics: 'Helvetica-Oblique',
        bolditalics: 'Helvetica-BoldOblique'
  };
  var printer = new PdfPrinter(fonts);
  var docDefinition = {
    content: [
        'First paragraph',
        'Another paragraph, this time a little bit longer to make sure,'+ 
           ' this line will be divided into at least two lines'
    ],
    defaultStyle: {
        font: 'Helvetica'
    }
  };
  var pdfDoc = printer.createPdfKitDocument(docDefinition);

  return new Promise((resolve, reject) =>{ try {
    var chunks = [];
    pdfDoc.on('data', chunk => chunks.push(chunk));
    pdfDoc.on('end', () => resolve(Buffer.concat(chunks)));
    pdfDoc.end();
  } catch(err) {
    reject(err);
  }});
};

关于angularjs - 使用 pdfMake 通过 Node Express 将 PDF 内容返回到浏览器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42372962/

相关文章:

javascript - 使用全局对象避免 Angular 依赖注入(inject)

node.js - 使用 Nestjs 进行 super 测试 e2e : request is not a function

javascript - NodeJS/Angular 无法删除对象

javascript - 使用 pdfmake 库时文本离开页面

javascript - 如何在不使用 gulp 工具的情况下在 Angular 中使用 pdfmake 自定义字体?

javascript - 制作充当过滤器的函数

css - 没有滚动条的可滚动 ul 元素

json - Angularjs ng-repeat 在 JSON 的多层上进行重复过滤

node.js - 使用 NodeJS 的 Elasticsearch javascript 未安装

javascript - 使用 pdfmake 生成 pdf 时出现 TypeError