echarts图表导出为pdf

import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'// id -> 放echarts图表的节点id
// fileName -> 想要生成的文件名
function exportData(id, fileName) {const el = document.getElementById(id)const elWidth = el.clientWidthconst elHeight = el.clientHeightconst max = Math.max(elWidth, elHeight) // 宽高都取最大值生成的pdf才会正常显示html2canvas(el, {scale: 1, // 如果生成文件不清晰，可以自己调整下width: max,height: max,useCORS: true // 允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。}).then(canvas => {let pdf = new JsPDF('', 'pt', [canvas.width, canvas.height])let pageData = canvas.toDataURL('image/jpeg', 1.0) // 转换图片为dataURLpdf.addImage(pageData, 'JPEG', 0, 0, canvas.width, canvas.height) // 添加图像到页面pdf.save(`${fileName}.pdf`)})
}

html2canvas选项配置

echarts图表导出为pdf相关推荐

echarts 图表导出PDF(带滚动条)/图片导出PDF
echarts 图表导出PDF[带滚动条]/图片导出PDF 效果展示提出问题思考问题解决问题导出PDF 里面的页头中文乱码问题参数说明效果展示提出问题在开发过程中,有需求是将展示出来的 ...
开发一个导出功能，将echarts图表导出到excel文件中
首先,做这个功能开发时,首先有几点必须弄清楚:1.echarts图表导出时该怎样导出到excel中,2.有没有图表自带的导出功能可用.经过我上网查阅相关资料以及去echarts官网查看API后,发现图 ...
echarts 图表导出到 Word
本篇文章主要记录了使用 poi-tl Java类库实现前端 echarts 图表导出到 Word 的详细步骤. 版本:Word:2019,poi-tl:1.10.5 ,poi:4.1.2 poi-tl ...
open flash chart2 php,open flash chart2 图表导出到PDF，服务端语言为PHP
1.ofc生成图片 ofc生成图片有两种选择:一是生成图片,然后上传到服务器保存起来:而是生成图片,然后传给JavaScript函数. 1)上传至服务器 OFC暴露了一个接口用于将图片数据上传至服务器 ...
ECharts 图表导出
Echarts图形是由Javascript亲自在前端网页上绘制的 1.用ECharts配置项手册中的toolbox.feature.saveAsImage toolbox: {show: true,f ...
wordExport导出word时关于echarts图表生成图片的解决方案
一.基本介绍 wordExport是一款基于前端处理生成word的处理方式在对应页面引入FileSaver.js和jquery.wordexport.js 使用:需生成word的部分.wordExp ...
前端报表导出成word文档（含echarts图表）
前端报表导出成word文档(含echarts图表) 一.问题背景: 前端vue做的各种维度的报表,原来是通过前端整体截屏导出成PDF,但部分报表在遇到跨页时会被截断,客户体验极差.然后又考虑客户可能需 ...
【生成PDF】Java如何根据前台Echarts图表生成PDF，并下载
文章目录前言一.如何通过java代码生成PDF? 1.依赖二.如何在PDF中画前台的echarts图? 1.如何拿到前台echarts图的信息? 前台代码: 后台逻辑:生成PDF,并下载 PDF ...
vue页面截图用html2canvas截图不完整有滚动条+有echarts图表时完整截图——截图保存为图片或pdf
问题最开始需要做一个网页的截图,结果发现有滚动条怎么都截取不成功,然后各种百度到了一个办法,就是复制那个节点到body,然后在截取那个复制的节点,小页面实验了一下,成功了好开心,代码是这样的.但是, ...

echarts图表导出为pdf

echarts图表导出为pdf相关推荐

最新文章

热门文章