在 csv/xlsx 文件中写入图像的正确方法是什么?
What is the correct way to write an image in a csv/xlsx file?
我正在尝试将图像写入 csv 文件。脚本写入了文件,但是图像的内容却乱七八糟。
����\u0000\u0010JFIF\u0000\u0001\u0001
的长序列。
有人可以指出我在编码中遗漏了什么,还是我应该做其他事情?
测试:
mkdir so-38711430; cd so-38711430; npm init -y; npm i -S lodash json2csv;
'use strict';
const _ = require('lodash');
const json2csv = require('json2csv');
const fs = require('fs');
let rows = [
{
'id': 1,
'name': '12323',
},
{
'id': 2,
'name': '22323',
},
{
'id': 3,
'name': '323232',
},
{
'id': 4,
'name': '24242',
},
];
// image path is valid
fs.readFile(`./images/2NTSFr7.jpg`, 'utf-8', (err, data) => {
_.each(rows, (item) => {
item.image = data;
});
json2csv({
'data': rows
}, (err, csv) => {
fs.writeFile('file.csv', csv, (err) => {
if (err) throw err;
console.log('file saved');
});
});
});
这取决于您呈现 CSV/XLSX 文档的方式。
在 CSV 中,如果您在记事本中打开文档,显然您将看不到图像。 NotePad 不会渲染图像,只会渲染文本。正如其他人所说,您可以将 base64
字符串写入 CSV,例如使用 node-base64-image and jQuery-CSV:
import {encode, decode} from 'node-base64-image'; // ES6
// Get the image as base64 string
var base64string = encode("path/to/img");
// Create an arrays object, to convert to CSV
// Note this is an array of arrays. E.g.,
// For an array:
// array = [ "a", "b", "c" ],
// you get the third element by doing:
// array[2] ( = "c" )
//
// So, for an array of arrays, i.e., 3 arrays containing 3 elements each:
// arrayOfArrays = [ [ "a", "b", "c" ],[ "d", "e", "f" ], [ "g", "h", "i" ] ]
// you get the third element by doing (as above):
// array[2] ( = [ "g", "h", "i" ] )
// and the third element of the selected array by doing:
// array[2][2] ( = "i" )
var csvArrays = [
[ "Image Name", "Image base64 Data" ], // Example titles row
[ "name-for-image", base64string ], // Example data row
];
// Convert arrays to CSV
var csvData = $.csv.fromArrays(csvArrays);
// Write the file!
fs.writeFile('csvFile.csv', csvData, (err) => {
if (err) throw err;
console.log('It\'s saved!');
});
编辑:然后从 CSV 文件解码它,我们可以得到我们之前保存的 CSV 文件:
import {encode, decode} from 'node-base64-image'; // ES6
var csvFile = fs.readFile('csvFile.csv');
var csvDataAsArrays = $.csv.toArrays(csvFile);
// Get the second array from the group of arrays, then the second element from that array, hence `[1][1]`
var csvImgAsBase64 = csvDataAsArrays[1][1];
var imgAsData = decode(csvImgAsBase64);
fs.writeFile("img.jpeg", imgData, function() {
if (err) throw err;
console.log('It\'s saved!');
}
在XLSX中,您可以随意插入图片,然后打开Excel中的工作簿查看图片。以下是使用 Excel for Node 包执行此操作的方法:
ws.addImage({
path: './screenshot2.jpeg',
type: 'picture',
position: {
type: 'absoluteAnchor',
x: '1in',
y: '2in'
}
});
您还可以相对于单元格定位它:
ws.addImage({
path: './screenshot1.png',
type: 'picture',
position: {
type: 'twoCellAnchor',
from: {
col: 1,
colOff: 0,
row: 10,
rowOff: 0
},
to: {
col: 4,
colOff: 0,
row: 13,
rowOff: 0
}
}
});
我正在尝试将图像写入 csv 文件。脚本写入了文件,但是图像的内容却乱七八糟。
����\u0000\u0010JFIF\u0000\u0001\u0001
的长序列。
有人可以指出我在编码中遗漏了什么,还是我应该做其他事情?
测试:
mkdir so-38711430; cd so-38711430; npm init -y; npm i -S lodash json2csv;
'use strict';
const _ = require('lodash');
const json2csv = require('json2csv');
const fs = require('fs');
let rows = [
{
'id': 1,
'name': '12323',
},
{
'id': 2,
'name': '22323',
},
{
'id': 3,
'name': '323232',
},
{
'id': 4,
'name': '24242',
},
];
// image path is valid
fs.readFile(`./images/2NTSFr7.jpg`, 'utf-8', (err, data) => {
_.each(rows, (item) => {
item.image = data;
});
json2csv({
'data': rows
}, (err, csv) => {
fs.writeFile('file.csv', csv, (err) => {
if (err) throw err;
console.log('file saved');
});
});
});
这取决于您呈现 CSV/XLSX 文档的方式。
在 CSV 中,如果您在记事本中打开文档,显然您将看不到图像。 NotePad 不会渲染图像,只会渲染文本。正如其他人所说,您可以将 base64
字符串写入 CSV,例如使用 node-base64-image and jQuery-CSV:
import {encode, decode} from 'node-base64-image'; // ES6
// Get the image as base64 string
var base64string = encode("path/to/img");
// Create an arrays object, to convert to CSV
// Note this is an array of arrays. E.g.,
// For an array:
// array = [ "a", "b", "c" ],
// you get the third element by doing:
// array[2] ( = "c" )
//
// So, for an array of arrays, i.e., 3 arrays containing 3 elements each:
// arrayOfArrays = [ [ "a", "b", "c" ],[ "d", "e", "f" ], [ "g", "h", "i" ] ]
// you get the third element by doing (as above):
// array[2] ( = [ "g", "h", "i" ] )
// and the third element of the selected array by doing:
// array[2][2] ( = "i" )
var csvArrays = [
[ "Image Name", "Image base64 Data" ], // Example titles row
[ "name-for-image", base64string ], // Example data row
];
// Convert arrays to CSV
var csvData = $.csv.fromArrays(csvArrays);
// Write the file!
fs.writeFile('csvFile.csv', csvData, (err) => {
if (err) throw err;
console.log('It\'s saved!');
});
编辑:然后从 CSV 文件解码它,我们可以得到我们之前保存的 CSV 文件:
import {encode, decode} from 'node-base64-image'; // ES6
var csvFile = fs.readFile('csvFile.csv');
var csvDataAsArrays = $.csv.toArrays(csvFile);
// Get the second array from the group of arrays, then the second element from that array, hence `[1][1]`
var csvImgAsBase64 = csvDataAsArrays[1][1];
var imgAsData = decode(csvImgAsBase64);
fs.writeFile("img.jpeg", imgData, function() {
if (err) throw err;
console.log('It\'s saved!');
}
在XLSX中,您可以随意插入图片,然后打开Excel中的工作簿查看图片。以下是使用 Excel for Node 包执行此操作的方法:
ws.addImage({
path: './screenshot2.jpeg',
type: 'picture',
position: {
type: 'absoluteAnchor',
x: '1in',
y: '2in'
}
});
您还可以相对于单元格定位它:
ws.addImage({
path: './screenshot1.png',
type: 'picture',
position: {
type: 'twoCellAnchor',
from: {
col: 1,
colOff: 0,
row: 10,
rowOff: 0
},
to: {
col: 4,
colOff: 0,
row: 13,
rowOff: 0
}
}
});