由于img.onload方法不同于其他函数,他是一个事件回调。
js是单线程的 他会先按照顺序执行主程序 当主程序执行完成后才会执行事件回调 所以在批量导出图片时onload事件总是最后执行
采用了很多办法 ,网上提供的所有解决办法我都试过了,没有能解决的。所以我将解决方法转到后端来实现,但是node.js默认是单线程,一个node.js应用无法利用多核资源,将网络图片转成base64后再利用exceljs库写到excel中单张图片就需要一秒多的时间,所以最终采用定时器来解决,最近比较忙,就不详细阐述了,代码放下面:
js代码如下:
function main(data, sign, l) {
var timer = setInterval(function () {
var url = data[sign].asin_img;
var img = new Image();
img.src = url;
img.crossOrigin = "*";
if (img.complete == true) {
var base64 = getBase64Image(img);
data[sign].img = base64;
sign++;
computedLong(sign, l)
if (sign >= l) {
clearInterval(timer);
uploadBase(data)
}, 100)
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
var dataURL = canvas.toDataURL("image/jpeg");
return dataURL;
function uploadBase(data) {
var fileName = getNowFormatDate(time).replace(/\s+/g, "") + (Math.random() * 999).toFixed(0);
$.ajax({
type: "post",
url: "",
data: {
baseData: JSON.stringify(data),
fileName
success: function (data) {
if (data.code === 0) {
layer.msg(data.msg)
var a = document.createElement('a');
a.setAttribute('href', "/node_amz/data/" + fileName + ".xlsx");
document.body.appendChild(a);
a.click();
$(".loader-dialog").hide();
} else {
alert("接口异常")
error: function (err) {
alert("服务异常")
$("#out").click(function () {
var startTime = $("#startTime").val();
var endTime = $("#endTime").val();
var datas = [];
$.ajax({
type: "get",
url: "",
success: function (data) {
$(".loader-dialog").show();
data = JSON.parse(data);
if (data.return_code === 0) {
var prod_info = data.prod_info;
for (var i = 0; i < prod_info.length; i++) {
var asin_info = prod_info[i].asin_info;
for (let j = 0; j < asin_info.length; j++) {
datas.push(asin_info[j])
sessionStorage.setItem("sessionBase", JSON.stringify(datas))
var sessionBaseData = JSON.parse(sessionStorage.getItem("sessionBase"
));
var l = sessionBaseData.length;
$(".proBefore").text(0)
$(".proAfter").text(l)
main(sessionBaseData, 0, l)
} else {
alert("接口异常")
error: function (err) {
alert("获取sku异常")
nodejs代码如下:(将代码放到index.js文件)
var express = require("express");
var router = express.Router();
const fs = require("fs");
const Excel = require("exceljs");
var http = require("https");
router.post("/", function (req, res) {
const workbook = new Excel.Workbook();
workbook.created = new Date();
workbook.modified = new Date();
let sheet = workbook.addWorksheet("excel文件名称", {
properties: { defaultRowHeight: 80 },
});
sheet.columns = [
{ header: "id", key: "sku_id", width: 15 },
{ header: "asin", key: "asin", width: 15 },
{ header: "asin_name", key: "asin_name", width: 15 },
{ header: "sku缩略图", key: "sku_img", width: 25 },
res.header("Access-Control-Allow-Origin", "*");
var body = req.body.baseData;
var fileName = req.body.fileName;
baseDatas = JSON.parse(body);
sheet.addRows(baseDatas);
function addImg() {
return new Promise((resolve, reject) => {
sheet.eachRow(function (row, rowNumber) {
let rows = sheet.getRow(rowNumber + 1);
rows.height = 80;
rows.eachCell(function (cell, colNumber) {
rows.getCell(colNumber).alignment = {
vertical: "middle",
horizontal: "center",
wrapText: true,
});
});
for (var i = 0; i < baseDatas.length; i++) {
var imageId = workbook.addImage({
base64: baseDatas[i].img,
extension: "jpeg",
});
sheet.addImage(imageId, {
tl: { col: 3.5, row: i + 1 + 0.5 },
ext: { width: 80, height: 80 },
});
if (i === baseDatas.length - 1) {
resolve();
});
addImg().then(() => {
var s = "./" + fileName + ".xlsx";
workbook.xlsx.writeFile(s).then(
() => {
res.send({
code: 0,
msg: "导出成功",
});
(err) => {
res.send({
code: -1,
msg: "请联系管理员",
});
});
});
module.exports = router;
里面涉及到的exceljs库的知识直接去官网看一下,链接放这exceljs官网 如果对你有所帮助,记得点个赞哦!
由于img.onload方法不同于其他函数,他是一个事件回调。js是单线程的 他会先按照顺序执行主程序 当主程序执行完成后才会执行事件回调 所以在批量导出图片时onload事件总是最后执行采用了很多办法 ,网上提供的所有解决办法我都试过了,没有能解决的。所以我将解决方法转到后端来实现,但是node.js默认是单线程,一个node.js应用无法利用多核资源,将网络图片转成base64后再利用exceljs库写到excel中单张图片就需要一秒多的时间,所以最终采用定时器来解决,最近比较忙,就不详细阐述了,代
文章目录获取数据获取第一个 execle 工作簿表格1. 输出
json 格式2. 输出 csv 格式3. 输出 html 格式4.输出 formulae 格式输出成文件全部代码
data.xlsx
等待提示
使用Vue插件Loading;
导出图片需要将
图片转换成base64格式,我在后台直接写了个url转base64接口并开启缓存
导出exce支持多层对象读取数据,例如:{a:{b:[{c:1}]}};key可以写成’a.b[0].c’
此前我们应该先引入
exceljs插件const
ExcelJS = require('
exceljs');
由于对
js的框架不甚了解,所以只能手写取值逻辑
* 多级获取数据
* @param key 用点分开
* @param data 数据对象
exceljs : https://github.com/guyonroche/exceljs
1、先来个导入excel这里写代码片
解析方法var Excel = require('exceljs');var workbook = new Excel.Workbook();
var data = [];
workbook.xlsx.readFile('import.xlsx')
import * as Excel from 'exceljs'; ; // 如果是js则为 var Excel = require('exceljs');
import * as Stream from 'stream';
import { CellData } from '../m...
const e
jsexcel = require ( "e
jsexcel" ) ;
const fs = require ( "fs" ) ;
const util = require ( "util" ) ;
const readFileAsync = util . promisify ( fs . readFile ) ;
const writeFileAsync = util . promisify ( fs . writeFile ) ;
( async function ( ) {
//获得
Excel模板的buffer对象
const exlBuf = await readFileAsync ( "./test.xlsx" ) ;
//数据源
const data
创建 .env 文件并将以下详细信息添加到其中。
AWS_ACCESS_KEY= ' ********** '
AWS_SECRET_ACCESS_KEY= ' ********** '
BUCKET_NAME= ' ********** '
QUERY= ' ********** '
您应该还有一个名为 db.
json 的文件,其中包含您的数据库连接
" host " : " ***** " ,
" user " : " ***** " ,
" password " : " ***** " ,
" database " : " ***** "
Checkout or Move to Project
参考网站如下:
参考网址:https://github.com/hxj9102/table2excel
插件下载及说明:https://www.npmjs.com/package/excel4node
https://github.com/natergj/excel4node
主要安装插件
npm i excel4node
使用方式
首先安装excel4node
安装完成后目录下的
package.json
package-lock.json
内容会自动修改(自动添加版本和路径)
package.js
比较难看的代码,主要是为了实现带图片,带样式的table导出,希望哪位大佬有其他方法可以私信我
//引入exceljs
const Excel = require('exceljs');
// 导出excel
downloadExcel = () => {
let dataLength = 0;
this.state.dataItems.forEach(floor => {
floor.rooms.forEach(room =&.
const { spawn } = require('child_process');
const mongodump = spawn('mongodump', ['--host', 'localhost', '--db', 'mydatabase', '--out', 'C:\\data\\dump']);
mongodump.stdout.on('data', (data) => {
console.log(`stdout: ${data}`);
mongodump.stderr.on('data', (data) => {
console.error(`stderr: ${data}`);
mongodump.on('close', (code) => {
console.log(`child process exited with code ${code}`);
希望这些信息对你有帮助。