Fatal编程技术网

Javascript-将图像导出到excel

javascript excel

Javascript-将图像导出到excel,javascript,excel,nvd3.js,Javascript,Excel,Nvd3.js,使用此功能，我可以将图像导出到excel（XLS）。此代码需要图像的物理位置。但我想传递图像的dataUri，而不是物理路径。e、 g.数据：图像/jpeg；base64，/9j/4AAQSkZJRgABAQAAAQABAA 可能吗？ 函数exportExcel（）{ var模板={excel:'{table}}； var格式=函数（s，c）{ 返回s.replace（新的RegExp（“{（\\w+）}”，“g”），函数（m，p）{ 返回c[p]； }); }; var base64=函数{

使用此功能，我可以将图像导出到excel（XLS）。此代码需要图像的物理位置。但我想传递图像的dataUri，而不是物理路径。e、 g.数据：图像/jpeg；base64，/9j/4AAQSkZJRgABAQAAAQABAA

可能吗？ 
函数exportExcel（）{
var模板={excel:'{table}}；
var格式=函数（s，c）{
返回s.replace（新的RegExp（“{（\\w+）}”，“g”），函数（m，p）{
返回c[p]；
});
};
var base64=函数{
返回window.btoa（window.unescape（encodeURIComponent））；
};
var ctx={工作表：'工作表'，表：'}；
var b64=base64（格式（template.excel，ctx））；
blob=b64toBlob（b64，‘application/vnd.ms excel’）；
var blobUrl=window.URL.createObjectURL（blob）；
var saveLink=document.createElement（'a'）；
saveLink.download='export.xls'；
saveLink.href=blobUrl；
saveLink.click（）；
}
函数b64toBlob（b64Data、contentType、sliceSize）{
contentType=contentType | |“”；
切片大小=切片大小| | 512；
var byteCharacters=window.atob（b64Data）；
var ByteArray=[]；
var偏移；
对于（偏移量=0；偏移量}
尝试用数据url替换文件url

var ctx = { worksheet: 'Worksheet', table: '<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..." alt="" />' };

var ctx={工作表：'工作表'，表：'}；
无法将base64格式的图像导出到excel。
访问此页面：

我遇到了同样的问题，经过几个小时的研究，我用这种方法解决了它

// Code HTML
 <div id="chart-container" style="background: #fff;">
                            <canvas class="mt-5 w-100" id="doughnutChart"></canvas>
 </div>
// Code javascript
// Convert the div to image (canvas)
html2canvas(document.getElementById("chart-container"), {
    onrendered: function (canvas) {
        var img = canvas.toDataURL("image/jpeg", 0.9); //image data of canvas

        var a = document.createElement("a"); //Create <a>
        //a.href = "data:image/png;base64," + ImageBase64; 
        a.href = img;
        a.download = fileName + ".jpeg"; //File name Here

        var uri = 'data:application/vnd.ms-excel;base64,'
            , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><img src="{table}" alt="grafica" /></body></html>'
            , base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }
            , format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }

        var ctx = { worksheet: name || 'Hoja1', table: fileName + ".jpeg" }
        //window.location.href = uri + base64(format(template, ctx))
        var link = document.createElement("a");
        link.download = fileName+".xls";
        link.href = uri + base64(format(template, ctx));
        link.click();
    }
});

//编码HTML
//代码javascript
//将div转换为图像（画布）
html2canvas（document.getElementById（“图表容器”）{
onrendered：函数（画布）{
var img=canvas.toDataURL（“image/jpeg”，0.9）；//画布的图像数据

var a=document.createElement（“a”）；//创建
谢谢你的回答！我尝试过，但不起作用。如果我将dataURI设置为img src，我观察到网页上显示的图像。但是看起来这个函数无法处理它。感谢@rhersan提供详细信息。我尝试过这种方法，但得到的excel文件中没有图像。我添加了一个。单击（）在a.download=fileName+“.jpeg”之后。这也下载了图像，在excel中我可以看到图像。这里的问题是，excel中的图像是链接类型。如果我从磁盘中删除图像，excel中的图像也会被删除。如何取消图像源链接并在excel中保留复制的图像。任何想法都非常感谢