当前位置: 首页 > 工具软件 > pdfmake > 使用案例 >

ionic3实现移动端导出pdf文件,使用pdfmake

吉俊德
2023-12-01

首先,在项目中注入pdfmake

npm install pdfmake

然后在使用的页面中引入

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;

然后就可以根据规则写一个content,用pdfmake生成

    var docDefinition = {
      content: [
        { text: 'REMINDER', style: 'header' },
        {
          ul: [
            'Bacon',
            'Rips',
            'BBQ',
          ]
        }
      ],
      styles: {
        header: {
          fontSize: 18,
          bold: true,
        }
      }
    }
    this.pdfObj = pdfMake.createPdf(docDefinition);

生成之后得到一个pdfobj,通过getBuffer方法可以生成一个blob


this.pdfObj.getBuffer((buffer) => {
  var blob = new Blob([buffer], { type: 'application/pdf' });
});

最后就可以使用Cordova插件File和FileOpener,把blob写到储存空间,然后打开

this.file.writeFile(this.file.externalDataDirectory, 'test.pdf', blob, { replace: true }).then(fileEntry => {
  // Open the PDf with the correct OS tools
  alert(fileEntry.nativeURL);
  this.fileOpener.open(fileEntry.nativeURL, "application/pdf").then(() => {
    alert('File is opened')
  }).catch(e => {
    alert('Error opening file' + JSON.stringify(e))
  });
})

到这里就可以了,生成一个test.pdf的文件在手机上。

注意事项就是写文件之前要确定存储权限是打开的,不然的话会写入失败。

 类似资料: