jQuery点击pre标签后，将pre标签里面的内容存为文件下载下来
时间：2023年10月22日
编辑：佚名
这段代码是一个 JavaScript/jQuery 函数，主要实现的功能是在页面加载完成后，当用户点击 <pre> 元素时，将其文本内容以指定的文件类型下载到本地。
具体代码解析如下：
首先使用 $(document).ready() 方法，确保代码在文档加载完成后执行。
使用 $() 函数选择器选取所有 <pre> 元素，并且使用 .click() 方法为其绑定点击事件处理程序。
当用户点击 <pre> 元素时，触发点击事件处理程序。
在点击事件处理程序中，首先使用 $(this).text() 获取当前点击的 <pre> 元素的文本内容，并赋值给变量 content。
接着使用 $(this).attr('data-filename') 获取当前点击的 <pre> 元素的 data-filename 属性值，并赋值给变量 fileName。该属性用于指定下载文件的名称。
调用名为 downloadFile 的函数，传入 content、text/plain 和 fileName 作为参数。
downloadFile 函数定义在外层函数内部，接受三个参数：content（文件内容）、contentType（文件类型）和 fileName（文件名称）。
在 downloadFile 函数中，使用 new Blob() 创建一个 Blob 对象，其内容为 content，类型为 contentType。
创建一个 <a> 元素，并设置其 href 属性为 window.URL.createObjectURL(blob)，这将为 Blob 对象生成一个临时的 URL。
设置 <a> 元素的 download 属性为 fileName，表示下载文件的名称。
将 <a> 元素的样式设置为 display: none;，即隐藏该元素。
将 <a> 元素添加到文档的 <body> 元素中。
调用 .click() 方法模拟用户点击 <a> 元素，实现文件下载。
执行完文件下载后，使用 document.body.removeChild(link) 将 <a> 元素从文档中移除。
总体来说，这段代码实现了一个简单的文件下载功能，点击页面上的 <pre> 元素时，会自动以指定的文件类型将其内容下载到本地，文件名由 data-filename 属性指定。
代码：
$(document).ready(function() {
$('pre').click(function() {
var content = $(this).text();
var fileName = $(this).attr('data-filename');
downloadFile(content, 'text/plain', fileName);
});
function downloadFile(content, contentType, fileName) {
var blob = new Blob([content], {type: contentType});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
第二个版本：
双击后，弹窗是否下载，点击下载则下载！
$(document).ready(function() {
$('pre').dblclick(function() {
var content = $(this).text();
var fileName = $(this).attr('data-filename');
showDownloadConfirmation(content, 'text/plain', fileName);
});
function showDownloadConfirmation(content, contentType, fileName) {
if (confirm("是否下载该文件？")) {
downloadFile(content, contentType, fileName);
}
}
function downloadFile(content, contentType, fileName) {
var blob = new Blob([content], {type: contentType});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
具体代码解析如下：
首先使用 $(document).ready() 方法，确保代码在文档加载完成后执行。
使用 $() 函数选择器选取所有 <pre> 元素，并且使用 .click() 方法为其绑定点击事件处理程序。
当用户点击 <pre> 元素时，触发点击事件处理程序。
在点击事件处理程序中，首先使用 $(this).text() 获取当前点击的 <pre> 元素的文本内容，并赋值给变量 content。
接着使用 $(this).attr('data-filename') 获取当前点击的 <pre> 元素的 data-filename 属性值，并赋值给变量 fileName。该属性用于指定下载文件的名称。
调用名为 downloadFile 的函数，传入 content、text/plain 和 fileName 作为参数。
downloadFile 函数定义在外层函数内部，接受三个参数：content（文件内容）、contentType（文件类型）和 fileName（文件名称）。
在 downloadFile 函数中，使用 new Blob() 创建一个 Blob 对象，其内容为 content，类型为 contentType。
创建一个 <a> 元素，并设置其 href 属性为 window.URL.createObjectURL(blob)，这将为 Blob 对象生成一个临时的 URL。
设置 <a> 元素的 download 属性为 fileName，表示下载文件的名称。
将 <a> 元素的样式设置为 display: none;，即隐藏该元素。
将 <a> 元素添加到文档的 <body> 元素中。
调用 .click() 方法模拟用户点击 <a> 元素，实现文件下载。
执行完文件下载后，使用 document.body.removeChild(link) 将 <a> 元素从文档中移除。
总体来说，这段代码实现了一个简单的文件下载功能，点击页面上的 <pre> 元素时，会自动以指定的文件类型将其内容下载到本地，文件名由 data-filename 属性指定。
代码：
$(document).ready(function() {
$('pre').click(function() {
var content = $(this).text();
var fileName = $(this).attr('data-filename');
downloadFile(content, 'text/plain', fileName);
});
function downloadFile(content, contentType, fileName) {
var blob = new Blob([content], {type: contentType});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
第二个版本：
双击后，弹窗是否下载，点击下载则下载！
$(document).ready(function() {
$('pre').dblclick(function() {
var content = $(this).text();
var fileName = $(this).attr('data-filename');
showDownloadConfirmation(content, 'text/plain', fileName);
});
function showDownloadConfirmation(content, contentType, fileName) {
if (confirm("是否下载该文件？")) {
downloadFile(content, contentType, fileName);
}
}
function downloadFile(content, contentType, fileName) {
var blob = new Blob([content], {type: contentType});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
});
相关文章
猜你需要
