资讯专栏INFORMATION COLUMN

Excel快速批量导入生产Cavns并生成图片下载到本地

SillyMonkey / 2523人阅读

摘要:然后封面就一个一个下啦是不是很方便具体源代码在上有用的话记得星星

有时候会有这样的需求吧

有一个表格里面有一批数据需要批量生成封面
我们在浏览器里可以批量生成
比如

我们有这样一个表格需要生成图书封面

有三千多本书的话该怎么生成

我们就可以这样做

$.ajax({
        url: "ssss.csv",
        dataType: "text"
    }).done(successFunction);
function successFunction(data) {
        var allRows = data.split(/
?
|
/);
        var table = "";
        for (var singleRow = 0; singleRow < 10; singleRow++) {
            if (singleRow === 0) {
                table += "";
                table += "";
            } else {
                table += "";
            }
            var rowCells = allRows[singleRow].split(",");
            var m = {
                a: rowCells[0],
                b: rowCells[1],
                c: rowCells[2],
                d: rowCells[3]
            }
            book.push(m)
            for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
                if (singleRow === 0) {
                    table += "";
                } else {
                    table += "";
                }
            }
            if (singleRow === 0) {
                table += "";
                table += "";
                table += "";
            } else {
                table += "";
            }
        }
        table += "";
        table += "
"; table += rowCells[rowCell]; table += ""; table += rowCells[rowCell]; table += "
"; $("body").append(table); }

首先要解析excel表格
把csv格式的excel转化成html里面的table顺便把需要的信息push到一个数组

html里得到这样的表格

然后构建canvas

function drawBook(arr) {
        console.log(arr)
        var c = document.getElementById("myCanvas");
        var img = "c.png"
        var ctx = c.getContext("2d");
        // cxt.drawImage("c.png",0,0)
        
        var img = new Image();
        if (Math.random() < 0.5) {
          img.src = "c.png";
        } else {
          img.src = "b.png";
        }
        img.onload = function() {
            ctx.drawImage(img, 0, 0, 467, 666);
            ctx.fillStyle = "#985d3f";
            ctx.textAlign = "center";
            ctx.font = "36px Arial";
            ctx.fillText(arr.b.substring(0,8), 233, 100);
            ctx.fillText(arr.b.substring(8,16), 233, 150);
            ctx.fillText(arr.b.substring(16,24), 233, 200);
            ctx.font = "20px Arial";
            ctx.fillText(arr.c + "/著", 233, 240);
            ctx.font = "16px Arial";
            ctx.fillStyle = "#fff";
            ctx.fillText(arr.d, 233, 635);
            var i = c.toDataURL()
            download(i, arr.a, "png")
            // Canvas2Image.saveAsPNG(c)
        }
    }
function d() {
        b = book.length - 1
        for (var i = 0; i < book.length; i++) {
            setTimeout(() => {
                if (b !== 0) {
                    console.log(b)
                    drawBook(book[b])
                    b--
                }
            }, i * 2000)
        }
    }

画好后用canvas2image.js下载图片

然后在chrome里设置下下载路径。然后封面就一个一个下啦

是不是很方便

具体源代码在github上
https://github.com/fanshyiis/...

有用的话记得星星

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93794.html

相关文章

  • Excel批量数据的导入和导出,如何做优化?

    摘要:并且在对的抽象中,每一行,每一个单元格都是一个对象。对支持使用官方例子需要继承,覆盖方法,每读取到一个单元格的数据则会回调次方法。概要Java对Excel的操作一般都是用POI,但是数据量大的话可能会导致频繁的FGC或OOM,这篇文章跟大家说下如果避免踩POI的坑,以及分别对于xls和xlsx文件怎么优化大批量数据的导入和导出。一次线上问题这是一次线上的问题,因为一个大数据量的Excel导出...

    Tecode 评论0 收藏0
  • 如何创建一个数据科学项目?

    摘要:虽然我们可以在网上参照各种模板项目文章博客等创建一个数据科学项目,但是目前也没有教科书对这些知识做一个统一的回答。举个例子来说,数据科学分析项目通常就不需要部署和监控这两个过程。创建文件描述源数据及位置。进一步探索和报告在整个数据科学项目中 摘要: 在一个新的数据科学项目,你应该如何组织你的项目流程?数据和代码要放在那里?应该使用什么工具?在对数据处理之前,需要考虑哪些方面?读完本文...

    Aceyclee 评论0 收藏0
  • 慕课网_《如何使用高德云图在线制作属于你的地图》学习总结

    摘要:时间年月日星期日说明本文部分内容均来自慕课网。用户可以在服务器端调用云存储云检索从而构建自己的存储和检索服务,甚至可以制作自己的数据管理台。 时间:2017年08月13日星期日说明:本文部分内容均来自慕课网。@慕课网:http://www.imooc.com教学源码:无学习源码:https://github.com/zccodere/s... 第一章:云图产品介绍 1-1 云图产品介绍...

    k00baa 评论0 收藏0
  • 慕课网_《如何使用高德云图在线制作属于你的地图》学习总结

    摘要:时间年月日星期日说明本文部分内容均来自慕课网。用户可以在服务器端调用云存储云检索从而构建自己的存储和检索服务,甚至可以制作自己的数据管理台。 时间:2017年08月13日星期日说明:本文部分内容均来自慕课网。@慕课网:http://www.imooc.com教学源码:无学习源码:https://github.com/zccodere/s... 第一章:云图产品介绍 1-1 云图产品介绍...

    afishhhhh 评论0 收藏0
  • 使用PHPExcel读写excel

    摘要:要求,使用了名字空间编码规范最新的语言新特性对版本的要求加强。已经放出稳定版,官方不再建议使用。保存和导入的行为分别由和负责。注意不要混淆和对象持有数据,和是对其进行序列化和反序列化的辅助类。单元隶属于具体的表单,使用上和表单类互动最多。 转载请注明文章出处:https://tlanyan.me/use-phpexc... PHPOffice出品的PHPExcel是PHP读取和生成Ex...

    wupengyu 评论0 收藏0

发表评论

0条评论

SillyMonkey

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<