javascript:jsPDF-AutoTable pdf不显示数据

时间:2018-01-03 10:12:55

标签: javascript pdf jspdf jspdf-autotable

我有一段代码可以从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只显示空白。你有这个问题吗?我该如何解决?

enter image description here

当我在pdf阅读器上打开pdf时,我得到这个空白页面: enter image description here

0 个答案:

没有答案