在ionic 2应用程序中打开PDF文件

Question

我正在尝试制作ionic 2应用程序。 我有一个使用jsPDF生成的pdf文件。

相同的代码是

var doc = new jsPDF();
doc.setFontStyle('Bold');
doc.setFontSize(14);
doc.text('Testing PDFs', 20, 20);

现在，我想将打开的PDF保存在移动应用中，

但是doc.output('save', 'tester.pdf'); 在移动应用中似乎无法正常工作。

请告诉我我可以安装哪个插件，以便查看和共享新制作的pdf。

Answer 1

我认为通过外部URL包含脚本在ionic中可能不是一个好选择。 还有另一种方法如下：

1-安装ng2-pdf-viewer模块

npm install ng2-pdf-viewer --save 

并将PdfViewerComponent导入到您的app.moudle.ts中，如下所示：

2-您可以安装jspdf模块，而不是通过外部URL包括jspdf.debug.‌js

npm install jspdf --save

3-实现离子拷贝自定义脚本

在您的离子项目的根目录中创建scripts文件夹，并在scripts文件夹中创建一个文件名copy-custom-libs.js。

module.exports = {
  copyCustomScript: {
    src: ["{{ROOT}}/node_modules/jspdf/dist/jspdf.min.js"],
    dest: "{{WWW}}/assets"
  }
} 

在package.json中，在底部添加config属性，如下所示：

 "config": {
      "ionic_copy": "./scripts/copy-custom-libs.js"
  } 

更新index.html并从资产文件夹中添加jspdf.min.js。

<script src="assets/jspdf.min.js"></script> 

4-最后，您可以编写如下代码：

该示例的源代码可以在这里找到： ionic pdf viewer

我希望这可以帮助您，谢谢:)

Answer 2

必须使用jsPDF来创建PDF。 然后，必须使用blob属性将其转换为应用程序可以使用的格式，以允许在将其显示在屏幕上之前传入应用程序。

团块步骤之后，一个人必须安装NG2-PDF查看器被命令在命令行上npm install ng2-pdf-viewer --save并使用<pdf-viewer>以查看它的移动应用屏幕上。

确保在导入语句和@NgModule中的app.module.ts文件中导入ng-pdf-viewer @NgModule.

这是相同的代码，

var doc = new jsPDF();
doc.setFontStyle('Bold');
doc.setFontSize(14);
doc.text('Testing PDFs', 20, 20);
var blob = doc.output('blob', {type: 'application/pdf'});
let pdfUrl = {pdfUrl: URL.createObjectURL(blob)};
let modal = this.navCtrl.push(ResumeView, pdfUrl);

在ResumeView中

@Component({
  selector: 'page-resume-view',
  templateUrl: '<ion-content padding text-center>
                   <pdf-viewer [src]="pdfUrl" 
                               [page]="page" 
                               [original-size]="false"
                               style="display: block;">

                    </pdf-viewer>
                </ion-content>',
})
export class ResumeView {
  pdfUrl : String;
  constructor(public navCtrl: NavController, public navParams: NavParams) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ResumeView');
    this.pdfUrl = this.navParams.get('pdfUrl');
   }

}

Answer 3

这很简单

步骤：1）安装pdf-viewer插件：

     npm install ng2-pdf-viewer --save

步骤：2）在您的app.module.ts中：

   import { PdfViewerComponent } from 'ng2-pdf-viewer';

   @NgModule({
           declarations: [
              PdfViewerComponent,
            ],

步骤：3）在app.component.ts中：

      import { PdfViewerComponent } from 'ng2-pdf-viewer';

步骤：4）在您的页面html文件中：

 <ion-content>
 <pdf-viewer [src]="'YOUR_PDF_FILE_PATH'" [page]="page" [original-size]="false" style="display:block;"> </pdf-viewer>
 </ion-content>

Answer 4

安装插件：

ionic cordova plugin add cordova-plugin-file-opener2
npm install --save @ionic-native/file-opener


this.fileOpener.open('path/to/file.pdf', 'application/pdf')
  .then(() => console.log('File is opened'))
  .catch(e => console.log('Error opening file', e));

参考： 链接

Answer 5

您可以为此尝试：

在组件部分：

    import { DomSanitizer} from '@angular/platform-browser';
    url :any;

    constructor(private sanitizer: DomSanitizer) { }
    this.url = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.amu.ac.in/pdf/FreeResources.pdf');

在HTML部分：

<iframe  [src]="url" width="100%" height="100%" frameborder="0" ></iframe>