纯前端下载任意文件案例

最新推荐文章于 2024-09-30 15:42:36 发布

前端金熊

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量237

点赞数 1

分类专栏： Navigation项目文章标签：前端 javascript html 面试

本文链接：https://blog.csdn.net/qq_44019660/article/details/142632812

版权

Navigation项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

介绍

纯前端，不涉及后端或接口。这里演示的是下载html文件，这个思路可以实现想要的任何文件。
点击下载按钮，下载一个html文件(任何文件都可以实现)，打开下载的文件展示一个的html网页

演示

思路

编写对应的html字符串信息
把字符串信息转成url，赋值给a标签
a标签设置download属性后，可以下载url中的内容信息

代码实现

const scriptDataId: string = 'json-script';
// 定义一个包含 HTML 内容的字符串
  const htmlStr: string = `
    <!DOCTYPE html>
    <html lang="en">

      <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>导航集合</title>
      </head>

      <body>
      </body> 
      
      <script> 
        ...... // 此处省略业务代码,有兴趣可以去我的项目中查看
      <\/script>
    <\/html>
  `;

  // 创建一个 Blob 对象，将 HTML 字符串封装成一个可下载的文件
  const htmlStrBolo = new Blob([htmlStr], { type: 'text/html' });
  // blob转成url，使用URL.createObjectURL和fileReader都可以
  // 创建一个指向 Blob 对象的 URL
  const htmlStrUrl = URL.createObjectURL(htmlStrBolo);
  
  // 创建一个链接元素
  const aLink = document.createElement('a');
  // 设置链接的 href 属性为刚刚生成的 URL
  aLink.href = htmlStrUrl;
  // 设置下载文件的名称
  aLink.download = '导航下载文件.html';
  // 触发链接的点击事件，开始下载
  aLink.click();
  // 释放之前创建的 URL 对象，释放内存
  URL.revokeObjectURL(htmlStrUrl);