在 csv/xlsx 文件中写入图像的正确方法是什么？

Question

我正在尝试将图像写入 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');
        });
    });
});

Answer 1

这取决于您如何呈现 CSV/XLSX 文档。

在 CSV 中，如果您在记事本中打开文档，显然您不会看到图像。记事本不会渲染图像，只会渲染文本。正如其他人所说，您可以将其以base64 字符串写入CSV，例如使用node-base64-image 和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
        }
    }
});