pc端生成pdf,打印实现方案

pc端打印功能

老板想要一个打印前的预览,希望可以选择不同的打印方式,例如A4,A5,能选择横向纵向,能做边距调整,想到了先生成pdf,调研后选用pdfmake这个js库,符合需求,pdfmake文档比较全,还有案例,支持客户端和服务端

使用

先安装

npm install pdfmake

在页面引入

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

这时候就可以使用了

const  docDefinition = {
  // a string or { width: number, height: number }
  // pageSize: 'A5',
   pageSize: { width: 400, height: 500 },

  // by default we use portrait, you can change it to landscape if you wish
  pageOrientation: 'landscape',

  // [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins
  pageMargins: [ 40, 60, 40, 60 ],
  //内容
  content: [
    {text: 'Text on Portrait'},
    {text: 'Text on Portrait 2'},
  ]
};
//生成pdf并且新开一个页面打开
pdfMake.createPdf(docDefinition).open()

遇到的问题

中文乱码

默认情况下不支持中文,需要手动生成一个字体文件,引入后替换原有的字体生成字体文档

1. 首先要安装pdfmake,这步已经安装好了
2. 进入包目录 ./node_modules/pdfmake/
3. 把你想用的字体文件.TTF文件复制到./node_modules/pdfmake/examples/fonts下
4. 在./node_modules/pdfmake文件夹打开终端运行node build-vfs.js "examples/fonts"
5. 此时./node_modules/pdfmake/build/vfs_fonts.js就已经被替换了
6. 然后你需要进到你引用的组件中,此时pdf已经可以正常显示中文

pdfMake.fonts = {
  STLITI: {
    normal: "STLITI.TTF", //这个就是你引入字体文件的名称
    bold: "STLITI.TTF",
    italics: "STLITI.TTF",
    bolditalics: "STLITI.TTF",
  },
}

//我们生成pdf的时候也要指定一下字体,指定为我们引入的字体
var docDefinition = {
  content: (...),
  defaultStyle: {
    font: 'STLITI'
  }
}

项目部署后,发现引入报错,想来应该还是字体文件的问题,目前我的解决方案是把./node_modules/pdfmake/build/vfs_fonts.js文件复制到项目中,引入字体文件引入复制出来的字体文件,发布就没问题了,此时就可以愉快的使用了,大家有更好的方法也可以在评论区讨论

import pdfMake from "pdfmake/build/pdfmake";
import vfsFonts from "@/assets/vfs_fonts";
pdfMake.vfs = vfsFonts.vfs;