Question

我正在使用Angular UI Grid，并且我尝试了几种方法将图像（徽标）添加到导出的PDF文档的顶部。

我对我尝试过的实施方式没有运气......

exporterPdfHeader: { text: "My Header", image: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: "<urlOfImage>" }
exporterPdfHeader: { text: "My Header", backgroundImage: url("<urlOfImage>") }

这甚至可以吗？

提前致谢。

Answer 1

您可以在网格选项中使用headerTemplate: 'header-template.html',在自定义html标头中添加图片吗？

参见示例ui-grid tutorial

修改

好的，看了导出的源代码和文档后，没有任何关于在标题中传递图像的信息。

它确实会引导您pdfMake

图片

这很简单。只需使用{image：'...'}节点类型。

支持JPEG和PNG格式。

var docDefinition = { content: [ { // you'll most often use dataURI images on the browser side // if no width/height/fit is provided, the original size will be used image: 'data:image/jpeg;base64,...encodedContent...' }, { // if you specify width, image will scale proportionally image: 'data:image/jpeg;base64,...encodedContent...', width: 150 }, { // if you specify both width and height - image will be stretched image: 'data:image/jpeg;base64,...encodedContent...', width: 150, height: 150 }, { // you can also fit the image inside a rectangle image: 'data:image/jpeg;base64,...encodedContent...', fit: [100, 100] }, { // if you reuse the same image in multiple nodes, // you should put it to to images dictionary and reference it by name image: 'mySuperImage' }, { // under NodeJS (or in case you use virtual file system provided by pdfmake) // you can also pass file names here image: 'myImageDictionary/image1.jpg' } ], images: { mySuperImage: 'data:image/jpeg;base64,...content...' } }

引用结束

所以看起来你很亲密。

您可以尝试使用单引号包含的网站根目录的相对路径。

Answer 2

必须编写自定义导出功能来添加页边距。

Plnkr

$scope.export = function() {
    var exportColumnHeaders = uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.ALL);
    var exportData = uiGridExporterService.getData($scope.gridApi.grid, uiGridExporterConstants.ALL, uiGridExporterConstants.ALL, true);
    var docDefinition = uiGridExporterService.prepareAsPdf($scope.gridApi.grid, exportColumnHeaders, exportData);

    docDefinition.pageMargins = [40, 80, 40, 60];   

    if (uiGridExporterService.isIE() || navigator.appVersion.indexOf("Edge") !== -1) {
      uiGridExporterService.downloadPDF($scope.gridOptions.exporterPdfFilename, docDefinition);
    } else {
      pdfMake.createPdf(docDefinition).open();
    }
  }

除非使用Node.js（根据pdfmake库），否则必须以base 64编码的形式提供图像。否则，您可能需要使用JavaScript函数下载图像并将其转换为base 64。

参考文献：

https://stackoverflow.com/a/37058202/2808230
http://ui-grid.info/release/ui-grid.js
在我写这个答案时找到了这个答案：Angular UI Grid - Exporting an image to a pdf

Angular UI Grid - 如何将图像添加到导出的PDF的顶部？

2 个答案: