我如何将ExcelHTMLObject转换为Excel对象

Question

我有一个问题，我想在Excel中导出我的图表，但是当我将图表转换为对象HTMLImageElement并应用时

document.body.appendChild(newImg);

我使用asp经典功能：

 <%
 Response.ContentType = "application/vnd.ms-excel"
 Response.AddHeader "Content-Disposition","filename=""ExcelExport.xls"""
 %>

exel文件不会转换新的img。如何在excel文件中看到新的img？我可以对excel文件使用另一种类型的转换，还是必须先转换HTMLImageElement？

这是.css和.js文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript-canvas-to-blob/3.14.0/js/canvas-to-blob.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8   /FileSaver.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="utils.js"></script> <!--function for chart creation/mod-->
<style>
</style>

HTML和JavaScript函数

<prova></prova>
<button id="myButtonControlID"></button>
<div id="divTableDataHolder">

<div id="pagina">
        <div style="width:75%;">`enter code here`
            <canvas id="canvas"></canvas>
        </div>
    <img id"image">
    <button id="Aimg">Aggiorna IMG</button>
    </div>
</div>


<script>
    //***************************************insert the chart creation here**************************************
$(function() { 
setTimeout(assignSampleClick, 500);
});
function assignSampleClick () {
    canvas.toBlob(function(blob) {
        var newImg = document.createElement('img'),
         url = URL.createObjectURL(blob);
        newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    //  document.querySelector("#image").src = url;
            URL.revokeObjectURL(url);
        };
    newImg.src = url;
    document.body.appendChild(newImg);
    alert(newImg)
    // document.getElementsByTagName('prova')[0].innerHTML =url;
    },'image/gif');
};
$("#Aimg").click(function() {

    canvas.toBlob(function(blob) {
        var newImg = document.createElement('img'),
        url = URL.createObjectURL(blob);

            newImg.onload = function() {
     // no longer need to read the blob so it's revoked
                URL.revokeObjectURL(url);
            };
        alert(url)
        newImg.src = url;
        document.body.appendChild(newImg);
     //document.getElementsByTagName('body')[0].innerHTML ="funziona?BOH  SEMBRA DI SI";
    },'image/gif');
});

window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    window.myLine = new Chart(ctx, config);
};

 $("[id$=myButtonControlID]").click(function(e) {
     window.open('data:application/vnd.ms-excel,' + encodeURIComponent(    $('div[id$=divTableDataHolder]').html()));
    e.preventDefault(); //this is another type of conversion
});
</script>

转换所有HTML的ASP代码

<% Response.ContentType = "application/vnd.ms-excel"
Response.AddHeader "ContentDisposition", "filename=""ExcelExport.xls"""%>

Answer 1

当您说“使用asp经典功能”时，您实际上所做的是将生成的HTML发送到具有“非标准”内容类型和处置标头的客户端。 当我说非标准的时候，我的意思不是HTML输出的标准标题-这些是下载真实的Excel 97-2003二进制格式文件时使用的标题。 大多数浏览器会将该文件直接传递给Excel应用程序。 碰巧，Excel宽容了带有Excel扩展名的HTML文件，并将尝试将其解析为工作表格式。

要获得更多功能，您需要使用功能齐全的库来生成Excel文件，例如ExcelJS-但是我不知道它是否支持图像。

Answer 2

在这些页面上查找数据表导出

https://datatables.net/extensions/buttons/examples/initialisation/export.html