vue 使用 html2canvas 将div导出图片

最新推荐文章于 2024-08-09 09:47:57 发布

wgb0409

最新推荐文章于 2024-08-09 09:47:57 发布

阅读量464

点赞数

分类专栏： vue插件 js

本文链接：https://blog.csdn.net/wgb0409/article/details/116272459

版权

js 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

vue插件

7 篇文章 0 订阅

订阅专栏

该博客介绍了如何利用html2canvas和jspdf库将网页中的表格转换为PNG图片并下载，进而实现网页内容导出为PDF的功能。主要涉及的技术包括前端JavaScript库的导入、DOM元素的复制、canvas转换图片以及PDF生成。

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

npm install html2canvas
npm install jspdf

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
 
 
export default{
    exportpic(tableId,tableName){
		   var title = tableName; // 导出的pdf文件名
		 var targetDom = $("#"+tableId);
		 var copyDom = targetDom.clone();  
		 copyDom.width(targetDom.width() + "px");  
		 copyDom.height(targetDom.height() + "px");  
		 $('body').append(copyDom);  
		 
		 
		  html2Canvas(document.querySelector("#"+tableId)).then(canvas => {
		  
		  	let dataURL = canvas.toDataURL("image/png");
		  	if (dataURL !== "") {
		  		var aLink = document.createElement('a')
		  		aLink.download = "成绩分析表";
		  		aLink.href = dataURL;
		  		aLink.click()
		  	}
		  });
}