我有一段代码可以从JSON数据构建pdf。运行代码时,一切似乎都正常,但是当我下载pdf时,jsPDF-AutoTable生成的pdf部分就消失了。
这是我的代码:
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
import * as jsPDF from 'jspdf'; // add this 1 of 4
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { DomSanitizer } from '@angular/platform-browser';
import 'jspdf-autotable'; // add this 1 of 4
import { Http } from '@angular/http';
@Component({
selector: 'app-monitoring8',
templateUrl: './monitoring8.component.html',
styleUrls: ['./monitoring8.component.css']
})
export class Monitoring8Component implements OnInit {
// pdfSrc: string = 'pdf/pdf-test.pdf';
doc = new jsPDF('p', 'pt');
res = 'test';
imgData: string;
base64Image: string;
myData: string;
globals: DataService;
constructor(private http: Http, private glob: DataService, private domSanitizer: DomSanitizer) {
this.globals = glob;
}
ngOnInit() {
this.columns = ["ID", "Name", "Age", "Class", "Hi"];
this.rows = [
[ 1, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 2, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 3, 'MyName', '21', 'asdf-123', 'Hello world' ],
[ 4, 'MyName', '21', 'asdf-123', 'Hello world' ]
];
this.doc = new jsPDF('p', 'pt');
this.doc.page = 1;
this.doc.addImage(this.imgData, 'JPEG', 480, 20, 70, 46);
this.doc.setFontSize(16);
this.doc.setFontType("bold");
this.doc.setTextColor(0, 155, 200);
this.doc.text(40, 40, "Checklist HelpDesk");
this.doc.setFontType("notbold");
this.doc.setTextColor(0, 0, 0);
this.doc.setFontSize(10);
this.doc.setFontType("bold");
this.doc.setFontType("notbold");
this.doc.setTextColor(150);
console.log( this.doc.internal.pageSize.height );
console.log( this.doc.internal.pageSize.width );
this.doc.setTextColor(0, 0, 0);
this.doc.setFontSize(10);
this.doc.setFontType("bold");
this.doc.setFontType("notbold");
this.doc.setTextColor(150);
this.doc.setTextColor(0, 0, 0);
this.doc.setFontType("bold");
this.doc.text(297.64, 870, 'page ' + this.doc.page); //print number bottom right
this.doc.page++;
this.doc.page=1;
this.doc.text("\n");
this.doc.text(150,285, 'page ' + 1);
this.doc.autoTable(this.columns, this.rows,
{
margin: {top: 80},
}
);
this.doc.save('Testu.pdf');
}
}

似乎只有Chrome浏览器才能成功查看此表。 Okula和Document viewer只显示空白。你有这个问题吗?我该如何解决?