Question

问题：尝试根据页面上的div内容构建有效的html文件下载，但我无法将内容包装在正确的标记中。

问题：如何将!DOCTYPE，<head></head>和<html></html>标记添加到根据提取的div内容构建的文件下载中？

我无法在div中添加这些标记，因为DOM无法识别重复项。

当前代码：JS Fiddle

function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');

    mimeType = mimeType || 'text/html';
    link.setAttribute('download', filename);
    link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
    link.click();
}
var fileName = 'filename.html';

$('#download').click(function () {
    downloadInnerHtml(fileName, 'downloadCode', 'text/html');
});

Answer 1

从div中提取内容后，您是否尝试过添加包装数据？

var elHtml = document.getElementById(elId).innerHTML;
var fullHtml = "<!doctype html><html><head></head><body>" + elHtml + "</body></html>"

由于这是字符串处理而不是DOM操作，所以基本上可以做任何你想做的事。

从提取的div内容中将DOCTYPE添加到生成的下载文件中

1 个答案: