使用pdfmake导出pdf文件

米芝芝

已于 2024-05-08 14:31:47 修改

阅读量1.7k

点赞数

文章标签： pdf

于 2023-11-01 15:53:41 首次发布

本文链接：https://blog.csdn.net/weixin_44239362/article/details/134162816

版权

1、在项目中安装依赖

npm install pdfmake

2、配置中文

在项目的node_modules文件夹下找到pdfmake，在pdfmake目录下新建examples/fonts文件夹
我是在本地C:\Windows\Fonts复制了方正姚体常规字体，放到刚刚新建的examples/fonts文件夹下
如下图
在这里插入图片描述
在pdfmake目录下执行node build-vfs.js "./examples/fonts"

在build文件夹下会生成 vfs_fonts.js文件，里面有我们需要用的字体

3、使用

代码中引入

import pdfMake from 'pdfmake/build/pdfmake'
import vfs_fonts from 'pdfmake/build/vfs_fonts'

pdfMake.vfs = vfs_fonts.pdfMake.vfs
// 定义字体
pdfMake.fonts = {
  // webfont是字体名，可以自定义，下面需要用这个名字配置字体
  webfont: {
    // FZYTK.TTF 这个文件已经在 我们生成的 vfs_font.js 文件中，且已经引入，所以可以直接使用
    normal: 'FZYTK.ttf',
    bold: 'FZYTK.ttf',
    italics: 'FZYTK.ttf',
    bolditalics: 'FZYTK.ttf'
  }
}

// 定义pdfmake需要用的 pdf文件描述对象
var docDefinition = {
  pageSize: 'A4',
  content: this.content,//内容按照文档写即可
  defaultStyle: {
    // 设置我们定义的字体为默认字体
    font: 'webfont'
  },
  styles: {
    cover: {
      fontSize: 32, alignment: 'center', color: '#4472C4', margin: [0, 180, 0, 0]
    },
    tableExample: {
      fontSize: 12, alignment: 'center'
    },
    header: {
    	bold: true, margin: [0, 4, 0, 0]
    }
  }
}
// filename为自定义文件名
pdfMake.createPdf(docDefinition).download(filename, () => {
  console.log('complete')
})

pdfmake文档

图片转base64

注意：pdfMake 仅适用于 .jpeg / .jpg / .png 文件

getBase64Sync(imgUrl) {
  return new Promise(function(resolve, reject) {
    // 一定要设置为let，不然图片不显示
    const image = new Image()
    // 解决跨域问题
    image.setAttribute('crossOrigin', '*') // 解决跨域
    // image.crossOrigin = '*'
    image.crossOrigin = 'Anonymous'
    // 图片地址
    image.src = imgUrl
    // image.onload为异步加载
    image.onload = function() {
      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, image.width, image.height)
      // 图片后缀名
      const ext = image.src.substring(image.src.lastIndexOf('.') + 1).toLowerCase()
      // 图片质量
      const quality = 0.8
      // 转成base64
      const dataurl = canvas.toDataURL('image/' + ext, quality)
      // 返回
      resolve(dataurl)
    }
  })
}