jQuery点击pre标签后，将pre标签里面的内容存为文件下载下来-红穆笔记

这段代码是一个 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);
  }
});

文章版权归作者所有，未经允许请勿转载。

THE END