在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中，如果您在NotePad中打開文檔，顯然您將看不到圖像。記事本不會渲染圖像，只是文字。正如其他人所說，你可以使用node-base64-image和jQuery-CSV它寫在base64字符串到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 
     } 
    } 
});