Javascript - 将图像导出到 excel答案

【问题标题】：Javascript - export image into excelJavascript - 将图像导出到 excel
【发布时间】：2017-10-11 01:53:19
【问题描述】：

使用此功能，我可以将图像导出到 excel(XLS)。此代码需要图像的物理位置。但是我想传递图像的 dataUri 而不是物理路径。例如data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA...

有可能吗？

function exportExcel() {

    var template = { excel: '<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><meta name=ProgId content=Excel.Sheet> <meta name=Generator content="Microsoft Excel 11"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!--[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><table>{table}</table></body></html>' };

    var format = function (s, c) {
        return s.replace(new RegExp("{(\\w+)}", "g"), function (m, p) {
            return c[p];
        });
    };

    var base64 = function (s) {
        return window.btoa(window.unescape(encodeURIComponent(s)));
    };

    var ctx = { worksheet: 'Worksheet', table: '<img src="file://C:/Temp/chart.png" alt="" />' };

    var b64 = base64(format(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();
}


function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = window.atob(b64Data);
    var byteArrays = [];

    var offset;
    for (offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        var i;
        for (i = 0; i < slice.length; i = i + 1) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new window.Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new window.Blob(byteArrays, {
        type: contentType
    });
    return blob;
}

附上需求截图。 enter image description here 谢谢！

【问题讨论】：

标签： javascript excel nvd3.js

【解决方案1】：

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

// 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();
    }
});

结果： enter image description here

【讨论】：

感谢@rhersan 提供详细信息。我尝试了这种方法，但我得到的 excel 文件没有图像。我在 a.download = fileName + ".jpeg" 之后添加了 a.click()。这也下载了图像，在 excel 中我可以看到图像。这里的问题是，excel中的图像是链接类型。如果我从磁盘中删除图像，则 excel 中的图像也会被删除。如何取消链接图像源并将复制的图像保留在 excel 中。任何想法都非常感谢

【解决方案2】：

您不能将 base64 格式的图像导出到 Excel。访问此页面：https://www.infragistics.com/community/forums/f/ignite-ui-for-javascript/109480/adding-image-in-excel

【讨论】：

【解决方案3】：

尝试用数据 url 替换文件 url....

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

【讨论】：

感谢您的回答！我试过了，但它不工作。如果我将 dataURI 设置为 img src，我观察到网页上显示的图像。但看起来这个函数不处理它。