SpreaJs导出excel时的图片问题

收藏

你好，我在使用导出excel功能时，遇到两个问题。
1 sheet页的背景图、单元格的背景图、浮动的图片都没有了。
2 设置的下拉框格式的单元格，导出之后下拉选项页没有了。
请问该如何处理。谢谢

导出excel代码
$("#saveExcel").click(function () {
  var fileName = $("#exportFileName").val();
  var password = $("#password").val();
  if (fileName.substr(-5, 5) !== '.xlsx') {
fileName += '.xlsx';
  }
  var json = spread.toJSON();
  excelIo.save(json, function (blob) {
saveAs(blob, fileName);
  }, function (e) {
console.log(e);
  }, {password: password});
});

设置单元格背景图片的代码

sheet.getCell(4, 2).backgroundImage("..//images//123.png");

设置sheet页背景图片代码
spread.options.backgroundImage = "images/backImage.png";

设置浮动图片代码
sheet.pictures.add("f0", "..//images//123.png", 15, 4, 160, 50);

添加下拉框样式代码如下

var combo = new spreadNS.CellTypes.ComboBox();
combo.items([{ text: "", value: "null" },{ text: "男", value: "man" }, { text: "女", value: "woman" }]);
combo.editorValueType(spreadNS.CellTypes.EditorValueType.text);
sheet.getCell(1, 4).cellType(combo).value("");

Clark.Pan · Clark.Pan

第一个问题：您图片应该是引用的路径，这样Excel是没办法识别到的，您可以将图片保存成base64位的位图，然后引用，这样导出后Excel是可以显示的。
第二个问题：因为下拉单元格属于自定义单元格的内容，这部分是无法导出到Excel的。Excel对这块不兼容。

moonPang · moonPang

可以提供一个”图片保存成base64位的位图，然后引用“这样的例子吗？谢谢

moonPang · moonPang

$("#file_input").bind('change', function() {
var file = this.files[0];
if (!/image\/\w+/.test(file.type)) {
alert("必须选择图片文件!");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
pictureUrl = this.result;
imgUrl = e.target.result;
}
});

这段代码得到的pictureUrl和imgUrl应该都是base64格式得了吧，然后我用下面的方式设置单元格背景图片导出之后也是没有的

$("#setSpreadBackgroundImage").click(function () {
var activeRowIndex = sheet.getActiveRowIndex();
var activeColumnIndex = sheet.getActiveColumnIndex();
var layout = parseInt($("#layout").val());
sheet.getCell(activeRowIndex, activeColumnIndex).backgroundImage(imgUrl);
sheet.getCell(activeRowIndex, activeColumnIndex).backgroundImageLayout(layout);
});

Clark.Pan · Clark.Pan

图片的base64转换不是产品本身的功能，网上可以找到相关方法
类似这种形式，导出是没问题的
var base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAKBJREFUOE+l0cENwjAMBdCM0BEYhZG6AjdvwQhMUvXQI0KcKo6IY2/9v0qQnVilFoenJF+2q6RJRP7ihhFuGOGGO851Zg4/9PCGi8oOD+iAzQM8c7bRRTX9pStMmbnGd1Nhwz2vbOD+ATcwteagjPBSZuAVTmBqzUHhnTnkA2wkPmJT2wRKGbLk1avZHUAcwldv/n/hhhFuGOGGEW54nKQVV2qyDejeW7YAAAAASUVORK5CYII=';
sheet.getCell(1, 1).backgroundImage(base64Image);

moonPang · moonPang

你好，我用你给我的这段代码执行的时候，在web端可以显示，但是导出的时候还是没有该图片

Clark.Pan · Clark.Pan

我知道怎么回事了，Excel不支持背景图片的功能，所以无法导出，如果要导出图片您可以直接添加浮动图片进行导出。
像这样：
var base64Image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAKBJREFUOE+l0cENwjAMBdCM0BEYhZG6AjdvwQhMUvXQI0KcKo6IY2/9v0qQnVilFoenJF+2q6RJRP7ihhFuGOGGO851Zg4/9PCGi8oOD+iAzQM8c7bRRTX9pStMmbnGd1Nhwz2vbOD+ATcwteagjPBSZuAVTmBqzUHhnTnkA2wkPmJT2wRKGbLk1avZHUAcwldv/n/hhhFuGOGGEW54nKQVV2qyDejeW7YAAAAASUVORK5CYII=';
var picture = sheet.pictures.add("f2", base64Image, 50, 50, 100, 100);

		自动登录	找回密码
密码			立即注册

[已处理] SpreaJs导出excel时的图片问题

6 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄