使用Javascript(Vue)下载当前网页为HTML文件。

Question

我有一个基于vue框架的Web应用程序。我需要将网页URL作为输入发送，并获取该页面的innerHTML，然后通过点击下载文件来将其下载为html文件。

我已编写了vue组件，并添加了codesandbox示例。

<template>
  <input type="url" v-model="urlPath" />
   <button class="download_button" @click="downloadHtml">Download HTML</button>
</template>

方法

    methods: {
     downloadHtml() {
     let url = this.urlInput;
      fetch(url)
        .then((res) => res.text())
        .then((html) => this.downloadAsFile("report.txt", html));
   },   
   downloadAsFile(name, text) {
  const link = this.createDownloadableLink(name, text);
  const clickEvent = new MouseEvent('click');
  link.dispatchEvent(clickEvent);
},

createDownloadableLink(fileName, content) {
  let link = document.createElement("a");
  link.download = fileName;
  link.href = `data:application/octet-stream,${content}`;
  return link;
}
    }

以下是Codesandbox的示例 Sandbox链接

基本上，我正在设计Vue组件，其中我提供了URL输入并下载页面内容的innerHTML，并将其保存为HTML。对此部分有什么帮助吗？

- learningMonk

---

目前问题不明确。对于当前页面，您可以像以前一样操作。但是对于其他任何页面，您根本无法在客户端上执行此操作。它可以在 iframe 中呈现以获取 HTML，但任何值得信赖的网站都会对此进行限制。 - Estus Flask

我正在更新CodeSandbox演示。 - learningMonk

如果保证没有CORS问题，那么就可以了，但是问题没有说明这一点。在事件之前，您需要将“link”附加到文档中。请注意，问题仍然询问“innerHTML”。由于文档未呈现，“html”将与“innerHTML”不同。 - Estus Flask

我已经更新了问题。您能否检查一下我在沙盒示例中做错了什么？ - learningMonk

这里应该是 method 而不是 methods。 - Estus Flask

Answer 1

尝试以下方式：

<a 
  download 
  href="https://dev59.com/08Hqa4cB1Zd3GeqP_fuj" 
/>

你只需要将你的按钮标签替换为 a 标签，并在你的组件中定义一个变量来替换传递给 href 的值。

- ishowman

---

我已经添加了 CodeSandbox 链接... 你能检查一下吗？ - learningMonk

Answer 2

如果你想下载一个页面，为什么不使用带有 download 属性的链接呢？

否则你可以使用 Filereader API。

- Rorp