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

有时候会有这样的需求吧

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

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

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

我们就可以这样做

代码语言：javascript复制

$.ajax({
        url: 'ssss.csv',
        dataType: 'text'
    }).done(successFunction);

代码语言：javascript复制

function successFunction(data) {
        var allRows = data.split(/r?n|r/);
        var table = '<table>';
        for (var singleRow = 0; singleRow < 10; singleRow  ) {
            if (singleRow === 0) {
                table  = '<thead>';
                table  = '<tr>';
            } else {
                table  = '<tr>';
            }
            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  = '<th>';
                    table  = rowCells[rowCell];
                    table  = '</th>';
                } else {
                    table  = '<td>';
                    table  = rowCells[rowCell];
                    table  = '</td>';
                }
            }
            if (singleRow === 0) {
                table  = '</tr>';
                table  = '</thead>';
                table  = '<tbody>';
            } else {
                table  = '</tr>';
            }
        }
        table  = '</tbody>';
        table  = '</table>';
        $('body').append(table);
    }

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

html里得到这样的表格

然后构建canvas

代码语言：javascript复制

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)
        }
    }

代码语言：javascript复制

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/...

有用的话记得星星

html github git 开源 canvas

0 人点赞