如何将 div 中的源内容导出到 text/html 文件

... 一些 html ...</div> 我需要在这个 div 中获取 html 代码，将它放在一个文件中并强制以 TXT 格式下载它.

这怎么办?我应该使用 PHP 还是 JavaScript?我更喜欢 JavaScript.

解决方案

你可以这样使用:

更新了 jsfiddle，下载 btn(jquery)

使用普通 js 和自动执行的初始 jsfiddle

html


<span>你好</span>

html - 编辑(添加了执行此操作的链接)

Js

function downloadInnerHtml(filename, elId, mimeType) {var elHtml = document.getElementById(elId).innerHTML;var link = document.createElement('a');mimeType = mimeType ||'文本/普通';link.setAttribute('下载', 文件名);link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));链接.点击()；}var fileName = 'tags.html';//如果需要，您可以使用 .txt 扩展名

JS - 编辑

既然您在评论中说您使用的是 jQuery，我将从处理程序中调用此函数，而不是直接调用它.

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

您可以以文本形式下载，只需删除函数的第三个参数，它将采用默认值text/plain"，并在文件名中添加扩展名 .txt 而不是 html.

注意我编辑了这个答案，因为提问的人评论说他正在寻找如何让它与处理程序一起工作，他让它工作，但以防万一.原代码在jsfiddle

Let's say I have <div id="main"> ... Some html ...</div> and I need to take the html code within this div, place it inside a file and force a download of it in TXT format.


How can that be done? Should I use PHP or JavaScript? I would prefer JavaScript.
 解决方案 
You could use something like this:
Updated jsfiddle with download btn(jquery)
Initial jsfiddle with plain js and autoexecution
html
<div id="main">
    <span>Hey there</span>
</div>
html - Edit (Added a link to perform this action)
<a href="#" id="downloadLink">Download the inner html</a>
Js
function downloadInnerHtml(filename, elId, mimeType) {
    var elHtml = document.getElementById(elId).innerHTML;
    var link = document.createElement('a');
    mimeType = mimeType || 'text/plain';

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

var fileName =  'tags.html'; // You can use the .txt extension if you want
JS - Edit
Since you said in the comments that you are using jQuery i'll call this function from a handler, instead of calling it directly.
$('#downloadLink').click(function(){
    downloadInnerHtml(fileName, 'main','text/html');
});
You can download as a text, just remove the third argument for function, and it will take the default which is "text/plain", and add the extension .txt to the filename instead of html.
Note
I edited this answer since the person who asked commented that he was looking how to make it work with a handler, he made it work, but just in case.
The original code is in the jsfiddle

                        这篇关于如何将 div 中的源内容导出到 text/html 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

如何将 div 中的源内容导出到 text/html 文件

问题描述

相关文章

最新文章