前台-vue3 html转pdf

codingFunTime

已于 2023-07-21 17:13:54 修改

阅读量497

点赞数

分类专栏： key门户项目文章标签： pdf

于 2023-07-21 17:13:39 首次发布

本文链接：https://blog.youkuaiyun.com/hktkkkk/article/details/131856252

版权

key门户项目专栏收录该内容

37 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍如何在Vue3应用中将HTML内容转换为PDF文件。包括安装必要的依赖，创建htmlToPdf.ts工具文件，以及处理转换过程中可能出现的样式问题，需要开发者进行调试以确保PDF的样式正确呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤一：安装依赖包

npm i html2canvas
npm i jspdf

步骤二：在utils文件夹下新建htmlToPdf.ts文件

// 页面导出为pdf格式
import html2Canvas from 'html2canvas'
import jsPDF from 'jspdf'

const htmlToPdf = {
	getPdf(title, loading) {
		// loading = true;
		console.log(loading)
		html2Canvas(
			document.querySelector('#pdfDom') as HTMLElement,
			{
				allowTaint: false,
				taintTest: false,
				logging: false,
				useCORS: true,
				dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
				scale: 4, //按比例增加分辨率
			} as any
		).then((canvas) => {
			const pdf = new jsPDF('p', 'mm', 'a4') //A4纸，纵向
			const ctx: any = canvas.g

了解本专栏

超级会员免费看