html转pdf
需要html2canvas、jspdf两个插件
安装依赖
npm install html2canvas
npm install jspdf
代码内容
import html2Canvas from 'html2canvas' import JsPDF from 'jspdf' import { Loading } from 'element-ui' let loading export default { install(Vue, options) { Vue.prototype.exportPdfHandler = function (el, title, imgtype) { loading = Loading.service({ lock: true, text: '正在导出...', background: 'rgba(0,0,0,.5)', }) // el 要导出元素的id // title 文件名称 // imgtype 图片类型 默认png let imgType = imgtype ? imgtype : 'png' let element = document.getElementById(el) window.pageYOffset = 0 document.documentElement.scrollTop = 0 document.body.scrollTop = 0 html2Canvas(element, { logging: false, useCORS: true, allowTaint: true, height: element.scrollHeight + element.clientHeight, windowHeight: element.scrollHeight + element.clientHeight, scrollY: 0, }).then(function (canvas) { let leftHeight = canvas.height let a4Width = 555.28 let a4Height = 801.89 let a4HeightRef = Math.floor((canvas.width / a4Width) * a4Height) let position = 0 let pageData = canvas.toDataURL('image/jpeg', 1.0) let pdf = new JsPDF('x', 'pt', 'a4') let index = 1 let canvas1 = document.createElement('canvas') let height pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen') function createImpl(canvas) { if (leftHeight > 0) { index++ let checkCount = 0 if (leftHeight > a4Height) { let i = position + a4HeightRef for (i = position + a4HeightRef; i >= position; i--) { let isWrite = true for (let j = 0; j < canvas.width; j++) { let c = canvas.getContext('2d').getImageData(j, i, 1, 1).data if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) { isWrite = false break } } if (isWrite) { checkCount++ if (checkCount >= 10) break } else { checkCount = 0 } } height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef) if (height <= 0) { height = a4HeightRef } } else { height = leftHeight } canvas1.width = canvas.width canvas1.height = height let ctx = canvas1.getContext('2d') ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height) let pageHeight = Math.round((a4Width / canvas.width) * height) if (position != 0) { pdf.addPage() } // 设置20px 边距 pdf.addImage( canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 20, 20, a4Width, (a4Width / canvas1.width) * height ) leftHeight -= height position += height if (leftHeight > 0) { setTimeout(createImpl, 500, canvas) } else { pdf.deletePage(index - 1) pdf.save(title + '.pdf') } } } // 当内容未超过pdf一页显示的范围,无需分页 if (leftHeight < a4HeightRef) { pdf.addImage(pageData, 'JPEG', 10, 10, a4Width, (a4Width / canvas.width) * leftHeight) pdf.save(title + '.pdf') } else { try { pdf.deletePage(0) setTimeout(createImpl, 300, canvas) } catch (error) { console.log(error) } } setTimeout(() => { loading.close() setTimeout(() => { window.$app.$message.success('导出成功') }, 500) }, 2000) }) } }, }
使用
<div id="htmlexport"> 内容 </div> this.exportPdfHandler('htmlexport', ‘title’)
借鉴于此基础上修改了些:https://blog.csdn.net/weixin_45295262/article/details/117041018?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-117041018-blog-124343421.pc_relevant_multi_platform_whitelistv1&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-117041018-blog-124343421.pc_relevant_multi_platform_whitelistv1&utm_relevant_index=1
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求