echars 生成pdf
来源:互联网 发布:淘宝蜜妃儿女模特是谁 编辑:程序博客网 时间:2024/06/12 00:05
需要用到的插件:
html2canvas:将页面的dom元素转为图片的形式
jspdf:页面端的生成pdf工具,可以跳过后台进行下载。
echart:图表生成插件
页面代码:
<head> <meta charset="utf-8" /> <title></title></head><body> <div id="main" style="height:400px"></div> <button onclick="convertCanvasToImage()">download pdf</button></body><script src="js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script><script src="js/jspdf.min.js" type="text/javascript" charset="utf-8"></script><script src="js/echarts3.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript"> var myChart = echarts.init(document.getElementById('main')); var option = { backgroundColor: 'white', title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; myChart.setOption(option);</script><script type="text/javascript"> function convertCanvasToImage() { html2canvas(document.getElementById('main'), { onrendered: function(canvas) { document.body.appendChild(canvas); createPDFObject(canvas.toDataURL("image/jpeg")); } }); } function createPDFObject(imgData) { var doc = new jsPDF('p', 'pt'); doc.addImage(imgData, 5, 5, 600, 300, 'img'); doc.save('test.pdf') }</script>
①Echarts的option里面一定要设置背景颜色,否则的话,jspdf插件会默认将黑色作为背景色。
②因为只需要添加图表到pdf,所以设置字体的一些代码按需添加。
阅读全文
0 0
- echars 生成pdf
- Echars 生成柱状图
- echars 生成多张图片
- echars
- echars
- Echars 生成图表宽高问题
- 生成pdf
- 使用spring+flying sauser +velocity 导出文字+表格+echars图表为PDF
- php生成pdf生成
- itext pdf模板生成pdf
- 生成pdf专题之一 打印生成pdf
- 【JAVA生成PDF】利用模板生成PDF
- C#生成PDF文档
- c#生成pdf文件
- C#生成PDF文档
- 生成pdf,使用itext
- 免费生成PDF文档
- PDF文件的生成
- MySql 执行创建语句时报check the manual that corresponds to your MySQL server version for the right syntax to
- 完数:求1000以内所有完数
- Spring初学(2)
- hdu5651 乘法逆元
- CSS实现鼠标移动到图片上图片变大
- echars 生成pdf
- 【HDU
- spring Autowired注释以及如何使用接口对象实现解耦
- Java项目,使用本地DTD定义文件
- poj3126 Prime Path【bfs】
- os.environ 和 keras.json
- 使用Axure制作App原型应该怎样设置尺寸?
- Windows下使用VisualSVN Server搭建SVN服务器
- 波司登全国超千家门店_销售状况如何实时监控?