Angular JS 生成 PDF - 任何创建者 - 制作者模块？

Posted 2023-03-03

【中文标题】Angular JS 生成 PDF - 任何创建者 - 制作者模块？

【英文标题】：Angular JS generating PDF - any creator - maker modules?

【发布时间】：2015-03-20 06:36:38

【问题描述】：

正如标题所说，是否有任何适用于 Angular 的 PDF 创建器/生成器？

我见过https://github.com/MrRio/jsPDF，但找不到任何 Angular。我想将 html 页面制作成 pdf 文件以供下载。

【问题讨论】：

我也有同样的问题。我试过 jsPDF 但它有一些问题，比如对齐问题。有时似乎有些图层与其父级的边界重叠，有时图像没有出现。所以，我想知道是否有 AngularJS 库或任何其他替代库/模块用于从网页创建 PDF。

在此处使用 99% 类似问题的解决方案：***.com/questions/34049956/…

【参考方案1】：

这个 Angular 指令包含了 jsPDF 功能：

https://github.com/sayanee/angularjs-pdf

【参考方案2】：

看起来@Mike 离那里很近。一些快速的更改生成了一个看起来不错的文件并弹出了一个打印弹出窗口。

1 - 为要打印的区域指定一个 ID 'printArea'

2 - 添加$window 服务

$scope.printIt = function()
   var table = document.getElementById('printArea').innerHTML;
   var myWindow = $window.open('', '', 'width=800, height=600');
   myWindow.document.write(table);
   myWindow.print();
;

【讨论】：

这是个好主意。但我正在寻找的是类似于“导出到 excel”的解决方案，用户单击一个按钮并为您下载文件。只有在我的情况下，我才需要“导出为 PDF”选项。

【参考方案3】：

您可以使用 window.print() 来打印当前的 HTML 文档。使用媒体查询来调整样式文档。您可以快速构建文档并随时调用打印

@media print  
 /* All your print styles go here */
 #header, #footer, #nav  display: none !important;  

我的一个项目中的一些代码，打印表中唯一的内容：

 $scope.print = function () 
    console.log('modal print');

    var table = document.querySelector('.CSSTableGenerator').innerHTML;
    var myWindow = window.open('', '', 'width=800, height=600');
    myWindow.document.write(table);
    myWindow.print();

  ;

【讨论】：

你能把小提琴放在一起吗？ Abit 对这将如何工作感到困惑？

嗨 Mike，这个例子在 Angular JS 中是如何工作的，我也想保存而不是打印？

这个例子适用于 AngularJS，你只需要以编程方式查找元素，将其内容放入 iframe 并打印，就像在例子中一样。您不能跳过带有设置的打印对话框，这取决于浏览器。所以也许你应该使用jsPDF，它似乎很容易用角度调整，只要说你想要什么时候/在哪里触发打印，所以我会尽力提供帮助。你可以提供一些代码。

【参考方案4】：

您可以将您提到的 javascript 项目包装到您在整个应用程序中调用的服务中。这实际上是一种相当标准的做法，如果您需要更改底层实现，它还会隔离您的代码。

【讨论】：

如何实现？