我正在尝试制作一个 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。
【问题讨论】：
标签： javascript angularjs ionic2 cordova-plugins jspdf
我认为通过外部 URL 包含脚本在 ionic 中可能不是一个好的选择。还有一种方法如下：
1-安装ng2-pdf-viewer模块
npm install ng2-pdf-viewer --save
并在您的 app.moudle.ts 中导入 PdfViewerComponent，如下所示：
2- 您可以安装 jspdf 模块，而不是通过外部 url 包含 jspdf.debug.js
npm install jspdf --save
3- 实现离子拷贝自定义脚本
在您的 ionic 项目的根目录中创建脚本文件夹，并在脚本文件夹中创建一个文件名 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
希望对你有帮助，谢谢:)
【讨论】：
ionic_copy 是如何从 json 自动执行的？
必须使用jsPDF 来创建PDF。然后必须使用blob 属性将其转换为应用程序可以使用的格式，以便在将应用程序放在屏幕上之前允许传入应用程序。
在blob步骤之后，必须通过命令在命令行上安装ng2-pdf-viewer
npm install ng2-pdf-viewer --save 并使用<pdf-viewer> 在移动应用程序屏幕上查看。
确保在 import 语句的 app.module.ts 文件和 @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);
在简历视图中
@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');
}
}
【讨论】：
很简单
步骤：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>
【讨论】：
安装插件：
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));
参考：link
【讨论】：
你可以试试这个：
在组件部分：
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>
【讨论】：