excel做ns流程图_Excel快速批量导入生产Cavns并生成图片下载到本地

有时候会有这样的需求吧

有一个表格里面有一批数据需要批量生成封面

我们在浏览器里可以批量生成

比如

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

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

我们就可以这样做

$.ajax({

url: 'ssss.csv',

dataType: 'text'

}).done(successFunction);

function successFunction(data) {

var allRows = data.split(/\r?\n|\r/);

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 += '

';

table += rowCells[rowCell];

table += '

';

} else {

table += '

';

table += rowCells[rowCell];

table += '

';

}

}

if (singleRow === 0) {

table += '

';

table += '

';

table += '

';

} else {

table += '';

}

}

table += '

';

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里设置下下载路径。然后封面就一个一个下啦

是不是很方便

有用的话记得星星