JavaScript – экспорт HTML в Word, не включая изображения ⇐ CSS

[Anonymous]

Я пытаюсь экспортировать элемент HTML, содержащий изображения, в документ Word, используя приведенную ниже функцию, которую я собрал с использованием различных онлайн-источников. Загрузка документа Word запускается, но первая загрузка не включает изображения. Во второй раз и каждый раз после запуска загрузки изображения включаются.
Кто-нибудь сталкивался с этой проблемой раньше? Что-то не так с моей функцией ExportToDoc?

Код: Выделить всё

export function exportToDoc(element, filename = "") {
let html =
"Export HTML To Doc";
let footer = "";
html = html + document.getElementById(element).innerHTML + footer;

var statiC = {
mhtml: {
top:
/* eslint-disable */
"Mime-Version: 1.0\nContent-Base: " +
location.href +
'\nContent-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset="utf-8"\nContent-Location: ' +
location.href +
"\n\n\n\n_html_",
head: '\n\n\n_styles_\n\n\n',
body: "_body_",
},
};

var css =
"" +
"img {width:auto; height: 800px, margin-right: 100px}" +
"";

//  Image Area %%%%
var options = { maxWidth: 500 };
var images = Array();
var img = document.querySelectorAll("#" + element)[0].querySelectorAll("img");
for (var i = 0; i < img.length; i++) {
// Calculate dimensions of output image
var w = Math.min(img[i].width, options.maxWidth);
var h = img[i].height * (w / img[i].width);
// Create canvas for converting image to data URL
var canvas = document.createElement("CANVAS");
canvas.width = w;
canvas.height = h;
// Draw image to canvas
var context = canvas.getContext("2d");
context.drawImage(img[i], 0, 0, w, h);
// Get data URL encoding of image
var uri = canvas.toDataURL("image/png");
// document.querySelectorAll(img[i])[0].attr("src", img[i].src);
img[i].src = img[i].src;
img[i].width = w;
img[i].height = h;
// Save encoded image to array
images[i] = {
type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")),
location: img[i].src,
data: uri.substring(uri.indexOf(",") + 1),
};
}

// Prepare bottom of mhtml file with image data
var imgMetaData = "\n";
for (var i = 0; i < images.length; i++) {
imgMetaData += "--NEXT.ITEM-BOUNDARY\n";
imgMetaData += "Content-Location: " + images[i].location + "\n";
imgMetaData += "Content-Type: " + images[i].type + "\n";
imgMetaData += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n";
imgMetaData += images[i].data + "\n\n";
}
imgMetaData += "--NEXT.ITEM-BOUNDARY--";
// end Image Area %%

const output = statiC.mhtml.top.replace("_html_", statiC.mhtml.head.replace("_styles_", css) + html) + imgMetaData;
const url = "data:application/vnd.ms-word;charset=utf-8," + encodeURIComponent(output);

//file name
filename = filename ? filename + ".doc" : "document.doc";

// Creates the  download link element dynamically
let downloadLink = document.createElement("a");

document.body.appendChild(downloadLink);

//Link to the file
downloadLink.href = url;

//Setting up file name
downloadLink.download = filename;

//triggering the function
downloadLink.click();

//Remove the a tag after download starts.
document.body.removeChild(downloadLink);
}

Экспортируемый элемент содержит только некоторые основные теги div, p и img

Подробнее здесь: https://stackoverflow.com/questions/792 ... ing-images