首页 > 其他分享 >前端pdf一次下载多个echarts图表

前端pdf一次下载多个echarts图表

时间:2023-04-15 10:32:02浏览次数:28  
标签:canvas 图表 getElementById let arr1 push pdf document echarts


//需下载pdf,html2canvas 模块
savePDF:function(){
let obj1 = document.getElementById("pieChart");
let obj2 = document.getElementById("homepage-bandwidth-container");
let obj3 = document.getElementById("homepage-iops-container");
let obj4 = document.getElementById("homepage-await-container");
let arr1 = [];
arr1.push(obj1);
arr1.push(obj2);
arr1.push(obj3);
arr1.push(obj4);
let pdf = new JSPDF('', 'pt','a4');
for(let i = 0; i< arr1.length; i ++){
    html2canvas(arr1[i]).then((canvas) => {
        let pagedata = canvas.toDataURL("image/jpeg",1.0);
        let contentWidth = canvas.width;
        let contentHeight = canvas.height;
        let imgWidth = 555.28;
        let imgHeight = 555.28/contentWidth * contentHeight;
        let position = 200;
        pdf.addImage(pagedata, 'JPEG',0, position, imgWidth, imgHeight);
        if( i<arr1.length ){
            pdf.addPage(1);
        }
        
        if(i == arr1.length){
            pdf.save('图表导出'.pdf')
        }
    });
}

},

标签:canvas,图表,getElementById,let,arr1,push,pdf,document,echarts
From: https://blog.51cto.com/u_16071543/6192243

相关文章

  • VUE框架中实现HTML页面(局部)内容转PDF下载
    有一朋友想把网页内容变成PDF下载下来。问我有没有好办法。这还真巧了,咱公司也有这个需求,就是网页生成合同,然后可以直接打印合同内容。最早吧,就是可以直接打印就好了。当时为解决完美打印的问题,挺费劲的,当时第三方插件还有BUG(当然把解决放给发给作者了,作者早已经修复了),正经反复......
  • 【专题】2022年中国制造业数字化转型研究报告PDF合集分享(附原数据表)
    报告链接:http://tecdat.cn/?p=32145原文出处:拓端数据公众号本文中所说的制造业数字化转型,指的是在制造企业的设计、生产、管理、销售及服务的每一个环节中,将新一代信息技术应用到制造企业的设计、生产、管理、销售及服务的每一个环节中,并可以以每一个环节中产生的数据为基础,展开......
  • npm安装html2pdf后出现缺少文件的情况
      当时发现这个问题的时候,我就去node_modules里面找,确实没有这个文件,故判定是没有完全安装导致的错误信息最终解决方案:在终端中进入项目文件夹,执行以下命令:npmuninstallhtml2pdfnpminstallhtml2pdf这将卸载旧的html2pdf模块并重新安装它。如果你仍然遇到问题,请......
  • 制作图表展示
    1、制作柱形图展示数据的对比关系importxlwingsasxwapp=xw.App(visible=True,add_book=False)workbook=app.books.open('员工销售表.xlsx')foriinworkbook.sheets:chart=i.chart.add(left=200,top=0,width=55,height=211)chart.set_source_da......
  • PdfSharpCore是MIT开源协议
    PdfSharpCore是MIT开源协议,不过他依赖Sixlabors.Fonts和Sixlabors.ImageSharp库,Sixlabors已经修改了协议,https://sixlabors.com/pricing/上面的说明是:IfyouareconsuminganySixLaborslibrariesasaDirectPackageDependencyforusageinClosedSourcesoftwareinthe......
  • JAVA生成行程单PDF
    JAVA生成行程单PDF一、pom依赖首先引入PDF需要的pom依赖<!--pdf--><dependency><groupId>com.itextpdf</groupId><artifactId>itextpdf</artifactId><version>5.5.13</version>......
  • echarts在同一个dom元素中创建两个图表
    核心:使用grid进行分区//直角坐标系内绘图网格左右通过left和right分上下通过top和bottom分grid:[{left:'10%',right:'55%',width:'30%'},{left:'55%',right:'10%',width:'30%'},],实例效果图: 实例代码:initEch......
  • 微信小程序打开pdf文件,并支持保存分享等操作
    微信小程序直接下载文件时,保存到的路径为缓存路径tempxxx,如果需要查找文件就很麻烦,那我们可以先在小程序中预览文件,再执行后续操作,代码如下://方法constdownload=(type)=>{const{url='',name}=type;if(!url)return;console.log('uuuu',url,nam......
  • PDF转化为txt文件
    环境python>=3.6包pipinstallpdfminer.six直接贴代码:#!/usr/bin/envpython3.8.6#_*_coding:utf-8_*_#Description:#Author:qiaoxiaohang<[email protected]>#Date:2023/4/1218:20frompdfminer.pdfinterpimportPDFPageInterpreter,PD......
  • 把网页保存为可复制可编辑的PDF
    当你在网上看到了一篇文章,想永久保存下来,你会怎么办?ctrl+S保存为html或者mhtm?有时候html里有代码不让你保存、或者保存后打开内容有问题(如某csdn保存的html会跳转),有时候保存的网页html里图片不会正常显示(如wei信的公众号的文章在浏览器打开保存,并非wei信不让保存,而是它格式问题),有......