vue3实现导出pdf、png功能

准备做的系统中出现了想导出当前页面的png或者pdf设计数据较多后端做可能比较麻烦就自己研究了一下

1、安装html2canvas 、jspdf包

javascript 复制代码

npm install --save html2canvas   // 可以将dom元素转为一张图片
npm install --save jspdf   // 导出为PDF格式

2、vue组件中引用，代码如下：

javascript 复制代码

<template>
　<div class="content">
    <a-button @click="exportPNG" size="small" type="primary">导出PNG</a-button>
	<a-button @click="exportPDF" size="small" type="primary">导出PDF</a-button>
    <div id="main-charts">
        需要截取的内容区域
        我想测试导出是否可行
    </div>
　</div>
</template>

3、导出png

javascript 复制代码

<script lang="ts" setup>
  // 引入插件
  import html2canvas from 'html2canvas';
  import jsPDF from 'jspdf';
 
  // 导出png
  const exportPNG = () => {
	const ele: HTMLElement | null = document.getElementById('main-charts');
	html2canvas(ele as HTMLElement).then((canvas: any) => {
	  const contentWidth = canvas.width;
	  const contentHeight = canvas.height;
	  const ctx: any = canvas.getContext('2d');
      // 添加水印
	  ctx.textAlign = 'center';
	  ctx.textBaseline = 'middle';
      ctx.rotate((25 * Math.PI) / 180);
	  ctx.font = '20px Microsoft Yahei';
	  ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';
	  for (let i = contentWidth * -1; i < contentWidth; i += 240) {
        for (let j = contentHeight * -1; j < contentHeight; j += 100) {
          // 填充文字，x 间距, y 间距
          ctx.fillText('水印名', i, j);
        }
      }
	  const imgUrl = canvas.toDataURL('image/png');
	  const tempLink = document.createElement('a'); // 创建一个a标签
	  tempLink.style.display = 'none';
	  tempLink.href = imgUrl;
	  tempLink.setAttribute('download', '文件名'); // 给a标签添加下载属性
	  if (typeof tempLink.download === 'undefined') {
		tempLink.setAttribute('target', '_blank');
	  }
	  document.body.appendChild(tempLink); // 将a标签添加到body当中
	  tempLink.click(); // 启动下载
	  document.body.removeChild(tempLink); // 下载完毕删除a标签
	  window.URL.revokeObjectURL(imgUrl);
	})
  }
</script>

4、导出pdf

javascript 复制代码

<script lang="ts" setup>
  // 引入插件
  import html2canvas from 'html2canvas';
  import jsPDF from 'jspdf';
    
  const exportPDF = () => {
	const ele: HTMLElement | null = document.getElementById('main-charts');
	html2canvas(ele as HTMLElement, {
	  dpi: 96, // 分辨率
	  scale: 2, // 设置缩放
	  useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,
	  // backgroundColor:'#ffffff',这样背景还是黑的
	  bgcolor: '#ffffff', // 应该这样写
	  logging: false, // 打印日志用的 可以不加默认为false
	}).then((canvas) => {
	  const contentWidth = canvas.width;
	  const contentHeight = canvas.height;
	  // 一页pdf显示html页面生成的canvas高度;
	  const pageHeight = (contentWidth / 592.28) * 841.89;
	  // 未生成pdf的html页面高度
	  let leftHeight = contentHeight;
	  // 页面偏移
	  let position = 0;
	  // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
	  const imgWidth = 595.28;
	  const imgHeight = (595.28 / contentWidth) * contentHeight;
	  const ctx: any = canvas.getContext('2d');
      // 添加水印
      ctx.textAlign = 'center';
	  ctx.textBaseline = 'middle';
      ctx.rotate((25 * Math.PI) / 180);
	  ctx.font = '20px Microsoft Yahei';
	  ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';
      for (let i = contentWidth * -1; i < contentWidth; i += 240) {
        for (let j = contentHeight * -1; j < contentHeight; j += 100) {
          // 填充文字，x 间距, y 间距
          ctx.fillText('水印名', i, j);
        }
      }
	  const pageData = canvas.toDataURL('image/jpeg', 1.0);
	  const pdf = new jsPDF('', 'pt', 'a4');
	  if (leftHeight < pageHeight) {
		// 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
		pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
	  } else {
		// 分页
		while (leftHeight > 0) {
		  pdf.addImage(
			pageData,
			'JPEG',
			0,
			position,
			imgWidth,
			imgHeight
		  );
		  leftHeight -= pageHeight;
		  position -= 841.89;
		  // 避免添加空白页
		  if (leftHeight > 0) {
			pdf.addPage();
		  }
		}
	  }
	  // 可动态生成
	  pdf.save(`文件名.pdf`);
	});
  }
</script>