Question

我正在尝试创建一个离子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包含脚本可能不是离子的好选择。还有另一种方法如下：

1 - 安装ng2-pdf-viewer模块

npm install ng2-pdf-viewer --save

并在app.moudle.ts中导入 PdfViewerComponent ，如下所示：

2-而不是通过extenal url包含jspdf.debug. js，你可以安装jspdf模块

npm install jspdf --save

3-实施离子复制自定义脚本

在离子项目的根目录中创建脚本文件夹，并在脚本文件夹中创建文件名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并从您的assets文件夹添加jspdf.min.js。

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

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

此示例的源代码可在此处找到：ionic pdf viewer

我希望这可以帮助你，谢谢：）

Answer 2

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

在blob步骤之后，One必须通过命令在命令行上安装ng2-pdf-viewer npm install ng2-pdf-viewer --save并使用<pdf-viewer>在移动应用屏幕上查看。

确保在导入语句和@NgModule.

中的 app.module.ts 文件中导入ng-pdf-viewer

以下是相同的代码，

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));

Ref：link

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>

在ionic 2 app中打开PDF文件

5 个答案: