Angular pdf.js预览和打印

时间:2016-05-27 11:39:46

标签: angularjs pdf.js

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

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

我看到两种方式:

  • 单击该按钮时,打开一个新窗口并重新下载pdf以显示打印预览。但这会使服务器超载;
  • 使用angular下载pdf,让pdf.js仅渲染它,然后打印使用以前的方法只使用本地文件。但我不知道保存文件的位置。

我错过了什么,还有其他方法吗?

谢谢。

2 个答案:

答案 0 :(得分:0)

查看PDF.js演示应用程序 - 它包含一个打印按钮!

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

答案 1 :(得分:0)

有一个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>