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,这里很感谢原作者的思路和源码,希望可以有机会一起交流。原作者地址

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

目录
打赏
0
0
0
0
0
分享
相关文章
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
154 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
5月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
138 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
Node.js 中实现多任务下载的并发控制策略
Node.js 中实现多任务下载的并发控制策略
101 15
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
161 0
Next.js 实战 (六):如何实现文件本地上传
微信小程序图表制作利器:ECharts组件的使用与技巧
微信小程序图表制作利器:ECharts组件的使用与技巧
389 1
|
9月前
|
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
vue中使用echarts绘制双Y轴图表时,刻度没有对齐的两种解决方法
1719 0
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
495 0
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
206 2
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
110 1
JavaScript中的原型 保姆级文章一文搞懂

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问