echarts生成图表并下载为PDF文件(附带js源码地址)

简介: echarts生成图表并下载为PDF文件(附带js源码地址)

效果预览:

ok我们今天就做这个,这个是我在别的博文里面看到的,觉得很不错,自己改了一下,他写的是只能生成固定的文件名字和数据,我只是希望可以变的能够使用,这个是可以直接使用的,可以根据您的需求改变文件的名字和数据,不BB,看代码:

H5源码:

 <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <h2>请输入对应信息</h2>
    <input type="text" name="" id="head" placeholder="表头" /><br />
    <input type="text" placeholder="列名" id="name1"/><input type="text" placeholder="比重" id="p1"/><br />
    <input type="text" placeholder="列名" id="name2"/><input type="text" placeholder="比重" id="p2"/><br />
    <input type="text" placeholder="列名" id="name3"/><input type="text" placeholder="比重" id="p3"/><br />
    <input type="text" placeholder="列名" id="name4"/><input type="text" placeholder="比重" id="p4"/><br />
    <input type="button" name="" id="" value="点击生成" οnclick="creatEcharts()"/>
    <div id="main" style="width: 600px;height:400px;"></div>
    <div id="down"></div>

js引用:

<script src="../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="../js/jQuery/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="../js/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="../js/jspdf.js" type="text/javascript" charset="utf-8"></script>

这里面的js文件都可以去我的下载专区下载

js源码:

var head;
      function creatEcharts(){
        //拿数据
        head = $("#head").val();
        var name1 = $("#name1").val();  
        var name2 = $("#name2").val();  
        var name3 = $("#name3").val();  
        var name4 = $("#name4").val(); 
        var p1 = $("#p1").val();  
        var p2 = $("#p2").val();
        var p3 = $("#p3").val();  
        var p4 = $("#p4").val();  
      // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: head
            },
            tooltip: {},
            legend: {
                data:['比重']
            },
            xAxis: {
                data: [name1,name2,name3,name4]
            },
            yAxis: {},
            series: [{
                name: '比重',
                type: 'bar',
                data: [p1, p2, p3, p4]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
          var div = '<button οnclick="convertCanvasToImage()">下载图表为PDF</button>'
          $("#down").append(div);
      }
    </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(''+head+'.pdf')
        }

ok,这里很感谢原作者的思路和源码,希望可以有机会一起交流。原作者地址

还是希望高阶玩家可以联系我,一起交流。我对这个很感兴趣。

相关文章
|
2月前
|
数据采集 Web App开发 JavaScript
Puppeteer自动化:使用JavaScript定制PDF下载
在现代Web开发中,自动化工具如Puppeteer可显著提升效率并减少重复工作。Puppeteer是一款强大的Node.js库,能够控制无头Chrome或Chromium浏览器,适用于网页快照生成、数据抓取及自动化测试等任务。本文通过示例展示了如何使用Puppeteer自动化生成定制化的PDF文件,并介绍了如何通过配置代理IP、设置user-agent和cookie等技术增强自动化过程的灵活性与稳定性。具体步骤包括安装Puppeteer、配置代理IP、设置user-agent和cookie等,最终生成符合需求的PDF文件。此技术可应用于报表生成、发票打印等多种场景。
153 6
Puppeteer自动化:使用JavaScript定制PDF下载
|
2月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
45 0
|
2月前
|
JavaScript
使用node.js控制CMD命令——修改本机IP地址
使用node.js控制CMD命令——修改本机IP地址
|
2月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
69 1
|
2月前
|
JavaScript 算法 内存技术
如何降低node.js版本(nvm下载安装与使用)
如何降低node.js版本(nvm下载安装与使用)
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
混淆指定js文件
【9月更文挑战第26天】JavaScript 混淆旨在保护代码知识产权、减小文件体积和提高安全性。方法包括变量名和函数名混淆、代码压缩、控制流平坦化及字符串加密。常用工具如 UglifyJS 和 JScrambler 可实现这些功能。然而,混淆可能带来兼容性和调试困难等问题,需谨慎使用并确保法律合规。
|
2月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
183 0
|
3月前
|
移动开发 JavaScript 前端开发
js之操作文件| 12-5
js之操作文件| 12-5
|
2月前
|
JavaScript 前端开发 UED
JavaScript 地址信息与页面跳转
JavaScript 地址信息与页面跳转
43 0
|
2天前
|
人工智能 文字识别 数据挖掘
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
MarkItDown 是微软开源的多功能文档转换工具,支持将 PDF、PPT、Word、Excel、图像、音频等多种格式的文件转换为 Markdown 格式,具备 OCR 文字识别、语音转文字和元数据提取等功能。
41 8
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式