quiero guardar el gráfico html en un archivo de Word como imagen
pero el archivo de Word se puede descargar, pero la imagen del gráfico es solo una imagen X, lo que significa que no tiene datos
me podrias dar solucion
function ExportToDoc(filename = "") { html2canvas(document.getElementById("pyramid")).then((canvas) => { canvas.toBlob((blob) => { if (blob) { myBlob = blob; } }); }); var HtmlHead = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>"; var EndHtml = "</body></html>"; //complete html // var html = HtmlHead + document.getElementById("pyramid").innerHTML + EndHtml; var html = HtmlHead + "<img src='" + URL.createObjectURL( new Blob(new Uint8Array(myBlob), { type: "image/png" }) ) + "'/>" + EndHtml; // "<div id='export'><img class='hide' src='" + URLObj.createObjectURL() +"'/></div>" //specify the type var blob = new Blob(["\ufeff", html], { type: "application/msword", }); // Specify link url var url = "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html); // Specify file name filename = filename ? filename + ".doc" : "document.doc"; // Create download link element var downloadLink = document.createElement("a"); document.body.appendChild(downloadLink); if (navigator.msSaveOrOpenBlob) { navigator.msSaveOrOpenBlob(blob, filename); } else { downloadLink.href = url; downloadLink.download = filename; downloadLink.click(); } document.body.removeChild(downloadLink); }ingrese la descripción de la imagen aquí
para HTML
<Chart id="pyramid" ... </Chart>el gráfico está funcionando bien
function ExportToDoc(filename = "") { var img = new Image(); html2canvas(document.getElementById("pyramid")).then((canvas) => { img.src = canvas.toDataURL(); var HtmlHead = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>"; var EndHtml = "</body></html>"; var html = HtmlHead + "<img class='hide' src='" + img.src + "'/>" + EndHtml; var blob = new Blob(["\ufeff", html], { type: "application/msword", }); var url = "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(html); filename = filename ? filename + ".doc" : "Document.doc"; var downloadLink = document.createElement("a"); document.body.appendChild(downloadLink); if (navigator.msSaveOrOpenBlob) { navigator.msSaveOrOpenBlob(blob, filename); } else { downloadLink.href = url; downloadLink.download = filename; downloadLink.click(); } document.body.removeChild(downloadLink); }); }Lo resolví por mi cuenta.
También actualizado:
function htmlToFile(element, file = "hwp") { var img = new Image(); html2canvas(document.getElementById("pyramid")).then((canvas) => { img.src = canvas.toDataURL(); var header = "<html><head><meta charset='utf-8'></head><body>"; var footer = "</body></html>"; var sourceHTML = header + "<img class='hide' src='" + img.src + "'/>" + footer; var source = "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(sourceHTML); var fileDownload = document.createElement("a"); document.body.appendChild(fileDownload); fileDownload.href = source; fileDownload.download = "Document." + file; fileDownload.click(); document.body.removeChild(fileDownload); }); }