当前位置：首页 > news >正文

前端处理导出PDF。Vue导出pdf

news 2025/8/19 12:22:35

前言：该篇主要是解决一些简单的页面内容导出为PDF

1.安装依赖

使用到两个依赖，项目目录下运行这两个

//页面转换成图片
npm install --save html2canvas 
//图片转换成pdf
npm install jspdf --save

2.创建通用工具类exportPdf.js文件

可以保存在工具类目录下；

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'export function getPdf(title, id) {// 参数校验if (!title || !id) {console.error('Title and ID are required.')return}const element = document.querySelector(`#${id}`)if (!element) {console.error(`Element with ID "${id}" not found.`)return}html2Canvas(element, {allowTaint: true,useCORS: true,scale: 2}).then(function (canvas) {const contentWidth = canvas.widthconst contentHeight = canvas.height// A4纸尺寸 (单位: pt)const a4Width = 595.28const a4Height = 841.89// 设置外边距 (单位: pt)const marginLeft = 20const marginTop = 20const marginRight = 20const marginBottom = 20// 计算可用内容区域const availableWidth = a4Width - marginLeft - marginRightconst availableHeight = a4Height - marginTop - marginBottom// 计算缩放比例，使内容宽度适配可用区域const scale = availableWidth / contentWidth// 按比例计算图像在页面上的尺寸const imgWidth = contentWidth * scaleconst imgHeight = contentHeight * scale// 计算每页可容纳的高度（考虑上下边距）const pageHeight = availableHeightlet leftHeight = imgHeightlet position = 0const pageData = canvas.toDataURL('image/jpeg', 0.95)const PDF = new JsPDF('', 'pt', 'a4')if (leftHeight < pageHeight) {// 内容高度小于页面可用高度，直接添加图片（带外边距）PDF.addImage(pageData, 'JPEG', marginLeft, marginTop, imgWidth, imgHeight)} else {// 内容高度大于页面可用高度，分页处理while (leftHeight > 0) {// 添加当前页面图像（带外边距）PDF.addImage(pageData, 'JPEG', marginLeft, marginTop + position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= a4Height// 如果还有剩余内容，添加新页面if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')}).catch(function (error) {console.error('PDF导出失败:', error)})
}

3.Demo例子

<template><div><!-- 容器 --><div id="pdfHtml" ref="printHtml"><h1>这是一个Demo。</h1></div><button @click="exportPDF">PDF导出</button></div>
</template>
<script>
import { getPdf } from '@/utils/exportPdf';
export default {methods: {// 导出pdfexportPDF() {getPdf('关键因素', 'pdfHtml');}}
}
</script>