pdfmake生成pdf的使用方法

更新時(shí)間：2024年09月13日 10:41:51 作者：快樂小土豆~~

本文介紹了如何使用pdfmake第三方庫在項(xiàng)目中根據(jù)模板生成PDF文件,文中還提到了常用的配置,如頁眉和頁腳效果,對(duì)pdfmake pdf使用方法感興趣的朋友一起看看吧

利用pdfmake生成pdf文件

1.下載安裝pdfmake第三方包

npm i pdfmake

2.封裝生成pdf文件的共用配置

可以在utils文件夾下新建pdf文件夾，所有的pdf文件模板/共用配置等文件都放在該文件夾下
新建文件pdfUtils.js，該文件是一些公用配置項(xiàng)

import pdfMake from 'pdfmake/build/pdfmake';
pdfMake.fonts={
	Msyh:{
		italics: 'https://example.com/fonts/fontFile3.ttf',
    	bold: 'https://example.com/fonts/fontFile4.ttf'，
	}
	//可以設(shè)置文件的字體
}
export const PdfMake = pdfMake
export const baseDocDefinition={
//pdfmake中margin值的設(shè)置，4個(gè)值分別是[左，上，右，下]
	pageMargins:[40,70,40,40],//文檔邊距，不影響頁眉頁腳
	pageSize: 'A4', //設(shè)置紙張大小為A4
	pageOrientation: 'portrait', //portrait：縱向； langscape：橫向，默認(rèn)是縱向的
	//默認(rèn)文本設(shè)置,這里的屬性都是比較常見的就不贅述了
	defaultStyle:{
		font: 'Msyh',
		color: '#000000',
		bold: false,
		fontSize: 12,
		lineHeight: 1.2
	}
}
//pdf展示圖片，不能直接展示url,需要對(duì)文件進(jìn)行轉(zhuǎn)換
export async function getImageUrl(url){
	const response=await fetch(url)
	const blob=await response.blob()
	return new Promise((resolve,reject)=>{
		const reader=new FileReader()
		reader.onload=()=>{
			const base64data=reader.result
			resolve(base64data)
		}
		reader.onerror=reject
		reader.readAdDataURL(blob)
	})
}

3.生成pdf文件的文件模板內(nèi)容

新建getPdfDoc.js文件，該文件是具體要生成文件的配置

import { PdfMake } from './pdfUtils.js'
import { baseDocDefinition, getImageUrl } from './pdfUtils.js'
//由于文件中某些數(shù)據(jù)是自動(dòng)填充上去的，所以調(diào)用生成pdf的方法時(shí)要傳填充的數(shù)據(jù)
export function getDocPDF=async(data){
	const docDefinition={
		...baseDocDefinition,
		//獨(dú)有配置，這里可以參考文檔最后
		content:[
			//獨(dú)有的配置
			...
		]
	}
	PdfMake.createPDF(docDefinition).open()//生成pdf文件并打開，可以進(jìn)行預(yù)覽/導(dǎo)出
}

4.調(diào)用方法生成pdf

在需要的地方進(jìn)行調(diào)用
例如：

<template>
...
<el-button @click='exportDoc'>導(dǎo)出PDF文件</el-button>
...
</template>
import { getDocPDF } from '@/utils/getPdfDoc.js'
<script>
export default {
	data(){
		return {
			form:{}
		}
	},
	methods:{
		async exportDoc(){
			await getDocPDF(this.form)
		}
	}
}
</script>

pdfmake的文檔沒有中文版的，這里我列舉一些我用過的也是比較常用的配置

export function getDocPDF=async(data){
	const docDefinition={
		...baseDocDefinition,
		//頁眉
		header: {
      		absolutePosition: { x: 40, y: 10 },
      		stack: [
        		{ text: `${data.fullName}`, fontSize: 10, absolutePosition: { x: 0, y: 13 }, alignment: 'center' },
        		{
          			canvas: [{
            			type: 'line',
            			x1: 0,
            			y1: 30,
            			x2: 515,
            			y2: 30,
            			lineWidth: 1,
            			absolutePosition: { x: 0, y: 10 }
          			}]
        		},// 分割線
      		],
    	},
    	//頁腳
    	footer: function (currentPage, pageCount) {
      		return [
        		{
          			canvas: [
            			{
              				type: 'line',
              				x1: 40, y1: 0,
              				x2: 555, y2: 0,
              				lineWidth: 1
            			}
          			]
        		},
        		{
          			text: `${data.fullName}\n` + currentPage,
          			alignment: 'center',
          			fontSize: 10,
          			margin: [0, 10]
        		}
      		];
    	},
		content:[
			//獨(dú)有的配置
			...,
			//文本段落
			{
				text:'***',
				fontSize:16,//該段text的字體大小
				bold:true,//該段字體加粗
				lendingIndent: 25//首行縮進(jìn)
			},
			//表格
			{
				layout:{
					paddingTop: () => 5,
          			paddingBottom: () => 5,
          			paddingLeft: () => 5,
          			paddingRight: () => 5
				},
				table: {
          			widths: ['10%', '22%', '20%', '30%', '20%'],
          			body: [
            			[
            			//第一行的數(shù)據(jù)，即表格的表頭
              				{ text: '序號(hào)', alignment: 'center' },
              				{ text: '姓名', alignment: 'center' },
              				{ text: '手機(jī)號(hào)', alignment: 'center' },
              				{ text: '性別', alignment: 'center' },
            			],
            			//后面的數(shù)據(jù)行，如果不是靜態(tài)的數(shù)據(jù)，傳入的數(shù)據(jù)展示我們可能還需要進(jìn)行一下轉(zhuǎn)換，轉(zhuǎn)換成這里展示需要的數(shù)據(jù)格式
            			[
            				{ text: '1', alignment: 'center' },
              				{ text: '張三', alignment: 'center' },
              				{ text: '18888888888', alignment: 'center' },
              				{ text: '男', alignment: 'center' },
            			],
          			]
        		}
			},
			//左右布局
			{
				alignment: 'justify',
        		margin: [0, 20, 0, 5],
        		columns: [
          			{
          			//text可以直接是字符串，也可以是字符串?dāng)?shù)組
            			text: [
							'簽字日期：','\u00A0\u00A0\u00A0\u00A0','年','\u00A0\u00A0\u00A0\u00A0','月','\u00A0\u00A0\u00A0\u00A0','日'//這里的\u00A0是導(dǎo)出來展示是空格
						],
            			fontSize: 12
          			},
          			{
            			text: '簽字日期：','\u00A0\u00A0\u00A0\u00A0','年','\u00A0\u00A0\u00A0\u00A0','月','\u00A0\u00A0\u00A0\u00A0','日',
            			fontSize: 12
          			}
        		]
			},
			//如果需要換頁，即下面的內(nèi)容為新起一頁的內(nèi)容，可以通過給文本塊加上pageBreak屬性
			{
				text:' ',
				pageBreak:'after',//表示該文本塊后換頁
			},
			//如果需要展示像圖片，或者文本塊較多，要放在stack中，圖片不能直接展示url，要進(jìn)行格式轉(zhuǎn)換
			stack:[
				{
					image: await getImageUrl(data.url)
					width: 200,
				}
			]
		]
	}
	PdfMake.createPDF(docDefinition).open()//生成pdf文件并打開，可以進(jìn)行預(yù)覽/導(dǎo)出
}

頁眉效果