<template>
	<div>
		<div ref="contentToConvert">
		  <div>这个是活动方案1</div>
		  <div>这个是活动方案2</div>
		  <div>这个是活动方案3</div>
		  <div>这个是活动方案4</div>
		  <div>这个是活动方案5</div>
		  <div>这个是活动方案6</div>
		  <div>这个是活动方案6</div>
		</div>
		<el-button @click="gitOut" style="background-color: #3F9B6A;color: #fff;margin-top:50px">导出
		</el-button>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas'
	import jsPDF from 'jspdf'
	export default {
		data() {
			return {
				
			}
		},
		computed: {},
		created() {
		
		},
		mounted() {

		},
		methods: {
			 gitOut() {
				const content = this.$refs.contentToConvert;
				setTimeout(function() {
				     /* html2canvas 1.0.5 版本 */
					 
				   html2canvas(content).then(canvas => {
				        // 获取画布的图像数据
				        const imgData = canvas.toDataURL('image/png');
				        			
				        // 创建一个新的 PDF 文档
				        const pdf = new jsPDF('p', 'mm', 'a4');
				        			
				        // 添加图像到 PDF，第二个参数是图像格式，第三个参数是缩放比例
				        const imgWidth = 190; // 图像的宽度（mm）
				        const imgHeight = (canvas.height * imgWidth) / canvas.width; // 保持图像的宽高比
				        			
				        pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight); // 10, 10 是图像在 PDF 中的位置（mm）
				        			
				        // 保存 PDF 文件
				        pdf.save('downloaded.pdf');
				   })
				   
				}, 500);
				
			
				// 使用 html2canvas 将 div 渲染为画布
				// const canvas = await html2canvas(content);
			
				
			},
		}
	}
</script>

<style scoped>
	
</style>