Angular pdf.js 预览和打印答案

【问题标题】：Angular pdf.js preview and printAngular pdf.js 预览和打印
【发布时间】：2016-09-25 17:46:16
【问题描述】：

我正在使用 AngularJs 开发一个应用程序，它必须向用户显示服务器生成的 pdf。

我使用 pdf.js 成功下载并显示了一个 pdf，问题是现在我必须向用户提供打印它的功能。

我看到了两种方式：

单击按钮时，打开一个新窗口并重新下载 pdf 以显示打印预览。但这会使服务器超载；
使用 angular 将 pdf 下载到某处，并让 pdf.js 仅渲染它，然后仅使用以前的方法打印本地文件。但我不知道文件保存在哪里。

我错过了什么，还有其他方法吗？

谢谢。

【问题讨论】：

标签： angularjs pdf.js

【解决方案1】：

看看 PDF.js 演示应用程序 - 它包括一个打印按钮！

https://mozilla.github.io/pdf.js/web/viewer.html

【讨论】：

我已经看过了，但是那个文件里的东西太多了，我无法理解它......

【解决方案2】：

有一个 npm 包可以做到这一点https://github.com/legalthings/angular-pdfjs-viewer

用法

<!DOCTYPE html>
<html ng-app="app" ng-controller="AppCtrl">
    <head>
        <title>Angular PDF.js demo</title>
        <script src="bower_components/pdf.js-viewer/pdf.js"></script>
        <link rel="stylesheet" href="bower_components/pdf.js-viewer/viewer.css">

        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-pdfjs-viewer/dist/angular-pdfjs-viewer.js"></script>
        <script src="app.js"></script>

        <style>
          html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
          .some-pdf-container { width: 100%; height: 100%; }
        </style>
    </head>
    <body>
        <div class="some-pdf-container">
            <pdfjs-viewer src="{{ pdf.src }}"></pdfjs-viewer>
        </div>
    </body>
</html>

【讨论】：