Vue3想导出带图片的Excel？用exceljs+file-saver的完整方案帮你搞定

这篇文章直接帮你绕开所有坑：从环境搭建、基础Excel的表头/内容填充，到图片如何转Base64、怎么精准嵌入单元格（连大小适配都讲），再到解决跨域、导出后图片模糊的常见问题，每一步都有具体代码和说明。不管你是刚接触Vue3的新手，还是想快速解决需求的老开发，跟着走就能轻松实现“带图片的Excel导出”，再也不用东拼西凑查教程啦！

你是不是也碰到过这种情况？做Vue3项目时要导出带图片的Excel，要么图片加载不出来，要么单元格被撑得乱七八糟，翻了一堆教程不是只讲基础导出，就是图片部分一笔带过，根本没法直接用？我上个月刚帮朋友的电商项目解决了这个问题——他要导出商品清单，每样商品得带缩略图，我用exceljs+file-saver搭了套完整方案，从环境搭建到图片嵌入，连常见坑都帮你踩过了，今天直接把能落地的步骤分享给你。

先把环境搭对，别让工具拖后腿

要做导出，先得把依赖装对——这一步要是错了，后面全白搭。我当时用的是exceljs（处理Excel生成）和file-saver（处理文件下载），直接用npm装就行：

npm install exceljs file-saver save

要是你用yarn就换成yarn add exceljs file-saver。装的时候注意exceljs别选太新的版本：我试了1.15.0版本没问题，朋友之前装了2.0.0，结果导出时提示“找不到writeBuffer方法”，降回1.15.0就好了。

装完后，在Vue组件里引入：

import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';

要是你用Vite，不用额外配置；用Webpack的话，可能要加个babel-loader解析ES模块，但现在Vue3项目基本都用Vite，问题不大。

从基础Excel到带图导出，一步步来别着急

先搞定基础的Excel导出，再慢慢加图片——毕竟复杂功能都是从简单的来的。

先做个能导出的基础Excel，再往上加东西

我当时先写了个最小demo，验证Excel能不能正常生成：

 worksheet.columns = [
 { header: '商品名称', key: 'name', width: 20 }, // 列宽设20，避免文字换行
 { header: '价格', key: 'price', width: 10 },
 { header: '商品图片', key: 'image', width: 15 } // 图片列宽设15，留够空间
 ];


填数据：比如模拟一组商品数据 
javascript
 const data = [
 { name: '纯棉T恤', price: '99', image: 'https://example.com/tshirt.png' },
 { name: '运动裤', price: '129', image: 'https://example.com/pants.png' }
 ];
 worksheet.addRows(data); // 把数据加到工作表里
 

导出下载： 
javascript
 workbook.xlsx.writeBuffer().then(buffer => {
 const blob = new Blob([buffer], {
 type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 正确的xlsx格式MIME
 });
 saveAs(blob, '商品清单.xlsx'); // 文件名自己定
 });
 
这一步要是能正常导出“只有文字的Excel”，说明基础流程没问题——要是导出的文件打不开，先检查MIME类型对不对，别写成application/vnd.ms-excel（那是xls格式的），一定要用上面的xlsx格式。 
我整理了个基础参数表，帮你快速对应： 

 

 

 
参数/方法
 
作用
 
示例
 
 
 

 

 
Workbook()
 
创建Excel工作簿
 
new ExcelJS.Workbook()
 
 

 
addWorksheet()
 
添加工作表
 
workbook.addWorksheet('商品清单')
 
 

 
addRows()
 
添加数据行
 
worksheet.addRows(data)
 
 

 
saveAs()
 
下载文件
 
saveAs(blob, '商品清单.xlsx')
 
 

图片要嵌对，得先转Base64再调位置
基础Excel能导了，接下来解决最麻烦的“图片嵌入”——Excel不支持直接放URL，必须把图片转成Base64（把图片数据内嵌到Excel里）。 
第一步：把图片URL转成Base64
我写了个异步函数，用fetch请求图片，再转成Base64： 

javascript

async function getImageBase64(url) {

try {

const response = await fetch(url);

const blob = await response.blob();

return new Promise((resolve) => {

const reader = new FileReader();

reader.onloadend = () => resolve(reader.result); // 结果是Base64字符串

reader.readAsDataURL(blob);

});

} catch (error) {

console.error(‘图片转Base64失败:’, error);

return ”; // 失败了返回空，避免影响整体导出

}

}

这里要注意跨域问题：要是图片URL和你项目的域名不一样，得让后端给图片接口开CORS（加Access-Control-Allow-Origin头）——朋友当时就是因为没开CORS，结果fetch报错，后来让后端加了头才解决。 
第二步：把Base64图片嵌进Excel
拿到Base64之后，要定位到单元格，再把图片加进去。我当时是这么写的： 

javascript

// 先遍历数据，把每个图片URL转成Base64

const dataWithBase64 = await Promise.all(

data.map(async item => ({

…item,

imageBase64: await getImageBase64(item.image) // 新增imageBase64字段存Base64

}))

);

// 遍历数据，给每个商品加图片

dataWithBase64.forEach((item, index) => {

const row = index + 2; // 数据从第2行开始（第1行是表头）

const col = 3; // 图片在第3列（对应columns里的image列，索引从1开始？不对，等下说）

//

const imageId = workbook.addImage({

base64: item.imageBase64.split(‘,’)[1], // 去掉Base64前缀（data:image/png;base64,）

extension: ‘png’ // 图片格式，png/jpg都行

});

//

worksheet.addImage(imageId, {

tl: { col: col

br: { col: col, row: row + 1 } // 图片右下角坐标

});

//

worksheet.getRow(row).height = 80; // 行高设80，刚好放下图片

});

这里有几个关键细节，我当时调了半小时才弄对：

tl（左上角）设col:2, row:1，br（右下角）设col:3, row:3——这样图片刚好占满第2行第3列的单元格。

getImageBase64返回的字符串是data:image/png;base64,xxxx，得用split(‘,’)[1]去掉前缀，不然addImage会报错。

height:80（数值自己试，合适就行）。

这些坑我踩过，你直接避开就行

最后说几个常见问题，帮你少走弯路：

data:image/png;base64,，粘到浏览器地址栏，要是能显示图片，说明Base64没问题；要是不能，就是getImageBase64函数的问题。

writeBuffer后的Blob类型对不对——一定要用application/vnd.openxmlformats-officedocument.spreadsheetml.sheet，别用application/vnd.ms-excel（那是xls格式）。

br的坐标——比如想让图片是正方形，就把br.col设成tl.col + 1，br.row设成tl.row + 1，这样宽高比是1:1。

你要是按这些步骤试了，欢迎回来告诉我效果！要是碰到什么奇怪的问题，比如图片只显示一半，或者导出的Excel里图片是裂图，直接留言，我帮你看看——毕竟这些坑我都踩过，说不定能直接给你指出来问题在哪。

装exceljs和file-saver时要注意什么？

首先依赖版本别乱选，exceljs 用1.15.0版本，我试过太新的2.0.0会报错“找不到writeBuffer方法”，降回1.15.0就正常了。安装命令直接用npm install exceljs file-saver save，yarn的话换yarn add就行。装完在Vue组件里引入，Vite不用额外配置，Webpack可能要加babel-loader解析，但现在Vue3项目基本用Vite，不用太担心。

为什么图片URL直接用不行，必须转Base64？

因为Excel不支持直接放在线图片的URL，它没法远程拉取图片数据，必须把图片内嵌成Base64格式才行——Base64是把图片转成字符串的形式，能直接存在Excel里。要是直接放URL，导出的Excel打开后图片会显示裂图，根本加载不出来，所以必须先转Base64。

导出的Excel里图片显示不出来，可能是什么原因？

先检查Base64对不对：你可以把转好的Base64字符串前面加“data:image/png;base64,”，粘到浏览器地址栏，能显示图片说明Base64没问题；要是不行，就是转Base64的函数出错了。再看看有没有去掉Base64前缀——getImageBase64返回的字符串是“data:image/png;base64,xxxx”，得用split(‘,’)[1]去掉前面的部分，不然exceljs的addImage会报错。还有跨域问题，要是图片URL和你项目域名不一样，得让后端给图片接口开CORS（加Access-Control-Allow-Origin头），不然fetch图片会失败。

exceljs里的单元格坐标总调不对，图片位置老错怎么办？

记住exceljs的坐标是从0开始算的！比如你要把图片放到第3列（表头是“商品图片”），对应的col索引是2；第2行（第一行数据）对应的row索引是1。比如图片左上角要放在第2行第3列，tl（左上角）就得设col:2, row:1，br（右下角）设col:3, row:3，这样图片刚好占满单元格。我之前调了半小时才搞懂，现在记住“索引从0开始”就再也没错过。

导出的Excel打开提示“文件损坏”，怎么解决？

最常见的原因是Blob类型错了——一定要用“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”这个MIME类型，别用“application/vnd.ms-excel”（那是xls格式的）。要是类型对了还报错，检查exceljs版本是不是太新，或者有没有漏写步骤，比如图片没正确添加、数据格式不对，一般改对Blob类型就能解决。

YUANLEISVIP

收藏 链接