vue前端页面转PDF

最新推荐文章于 2024-08-20 14:01:33 发布

王等等csdn

最新推荐文章于 2024-08-20 14:01:33 发布

阅读量839

点赞数 1

文章标签：前端 javascript svg pdf canvas

本文链接：https://blog.csdn.net/qq_38475901/article/details/126578902

版权

这篇博客介绍了如何在前端使用Vue实现页面转PDF的需求。主要涉及html2canvas和jspdf两个插件，通过将SVG转换为Canvas处理地图等元素，最终实现完整页面的PDF导出功能。

摘要由CSDN通过智能技术生成

需求说明

公司最近想出一份报告，报告内容包含地图展示，折线图还有各种文字说明，跟后台沟通反映后台无法实现，所以就前端想办法来实现此功能。

所用插件

html2canvas
jspdf

html & css

将要导出内容结构包含在一个父元素下，id为pdfDom

<template>
	<div class="main-container">
		.....
		<div id="pdfDom">
			<!--需要导出的内容-->
			.....
		</div>
	</div>
</template>
<style>
	// 由于导出的这部分html结构是不想让用户看到的，所以我设置了父元素height：100vh，overFlow：hidden； 想要显示的内容正好占据一屏高度
	.main-container {
   
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}
</style>

javascript

由于地图上覆盖物有的是svg实现的，而html2canvas不能处理svg，所以，首先先将导出的html中的svg转成canvas

async loadImg(src) {
   
   return new Promise((resolve, reject) => {
   
        const img = new Image()
        img.src = src
        img.setAttribute('crossOrigin', 'anonymous')
        img.onload = () => resolve(img)
        img.onerror = () => resolve(img)
    })
},
async svg2Canvas() {
   
    const svgTags = document.querySelector('#pdfDom'