如何在Vue2.0项目中将base64格式的图片插入到xlsx文件中并下载该文件,前提是不能出现not exceed 32767 characters at write_ws_xml_cell (xlsx.这个错误,因为图片的base64已经超过了32767
时间: 2024-02-09 12:13:18 浏览: 370
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
5星 · 资源好评率100%
要将base64格式的图片插入到xlsx文件中并下载该文件,可以使用xlsx-style和file-saver库。
以下是实现步骤:
1. 安装xlsx-style和file-saver库。
```
npm install xlsx-style file-saver --save
```
2. 在Vue组件中引入xlsx-style和file-saver库。
```javascript
import XLSX from 'xlsx-style';
import saveAs from 'file-saver';
```
3. 编写下载Excel文件的方法。
```javascript
downloadExcel() {
// 创建一个新的工作簿
const wb = XLSX.utils.book_new();
// 创建一个新的工作表
const ws = XLSX.utils.aoa_to_sheet([[]]);
// 将base64格式的图片插入到工作表中
const img = new Image();
img.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgA...';
img.onload = function() {
// 计算图片的宽度和高度
const width = img.width;
const height = img.height;
// 将图片插入到工作表中
XLSX.utils.sheet_add_image(ws, 'A1', img, {width, height});
// 将工作表添加到工作簿中
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
// 生成Excel文件的Blob对象
const wbout = XLSX.write(wb, {bookType: 'xlsx', type: 'binary', bookSST: false});
const blob = new Blob([s2ab(wbout)], {type: 'application/octet-stream'});
// 下载Excel文件
saveAs(blob, 'example.xlsx');
};
},
```
在上面的代码中,我们首先创建了一个新的工作簿(wb)和一个新的工作表(ws)。然后,我们将base64格式的图片插入到工作表中,计算图片的宽度和高度,并将工作表添加到工作簿中。最后,我们使用XLSX.write方法将工作簿转换为Excel文件的Blob对象,并使用file-saver库的saveAs方法下载Excel文件。
需要注意的是,为了避免出现not exceed 32767 characters at write_ws_xml_cell (xlsx错误,我们在生成Excel文件的时候,将bookSST参数设置为false,这样可以避免共享字符串表(SST)的限制。同时,我们还需要定义一个s2ab函数,用于将二进制字符串转换为ArrayBuffer对象。
```javascript
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i < s.length; i++) {
view[i] = s.charCodeAt(i) & 0xFF;
}
return buf;
}
```
这样,我们就可以在Vue2.0项目中将base64格式的图片插入到xlsx文件中并下载该文件了。
阅读全文