vue动态生成html,txt，文件转file格式

最新推荐文章于 2026-08-05 14:36:47 发布

原创最新推荐文章于 2026-08-05 14:36:47 发布 · 423 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

23 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

这篇博客探讨了如何在Vue.js应用中动态生成HTML和TXT文件，并将这些文件转换为file格式，适用于需要处理文件内容和格式转换的场景。

动态生成html,txt，文件转file格式

<script>
 methods: {
    //动态生成html
     async reportSumbit() {
      let content = document.getElementsByClassName('ck-editor__main')[0].innerHTML;
      let link = '<link type="text/css" rel="stylesheet" href="' + this.BASE_URL + 'editor.css">'
      this.html = `<!DOCTYPE html>
            <html lang="en">
                <head>
                    ${link}
                </head>
                <body>
                    ${content}
                </body>
            </html>`;
      let urlObject = window.URL || window.webkitURL || window;
       //生成html
      let export_blob = new Blob([this.html], {
         type: "text/html",
       });
       //生成txt
       //let contentTxt = new Blob([editor.getData()], {
          //type: "text/txt",
        //});
       console.log(export_blob)
       var save_link = document.createElement("a")
       save_link.href = urlObject.createObjectURL(export_blob);
       save_link.download = name;
       save_link.click();
    },
 },
 //文件转file格式 例子：this.blobToFile(contentTxt, '富文本.txt')
  blobToFile(blob, fileName) {
    const file = new File([blob], fileName, { type: blob.type });
     return file;
   },
 
</script>