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

【问题标题】：download current web page as HTML file using Javascript(Vue)使用 Javascript(Vue) 将当前网页下载为 HTML 文件
【发布时间】：2021-11-01 12:18:42
【问题描述】：

我有一个在 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 Link

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

【问题讨论】：

不清楚是什么问题。至于当前页面，您可以像以前一样执行此操作。至于任何其他页面，您根本无法在客户端执行此操作。它可以在 iframe 中呈现以获取 HTML，但任何有信誉的网站都会对此进行限制。
我正在更新代码沙盒演示。
正如我所说，您无法在客户端有效地执行此操作，更不用说您可能希望 HTML 应用 JS，而它在获取时是静态的。您需要在服务器端获取并可能呈现页面。
对于当前页面，对于我将使用的相同域的 Intranet 站点 url。为了避免 CORS 问题等。但是我的示例代码我错过了一些东西，所以它不起作用
如果保证没有CORS就可以了，问题就不这么说了。您需要在事件之前将link 附加到文档中。请注意，问题仍然是关于innerHTML。 html 与 innerHTML 不同，因为文档未呈现。

标签： javascript html vue.js

【解决方案1】：

如果是你要下载的页面，为什么不使用带有下载属性的链接呢？

否则你可以使用 Filereader API

【讨论】：

【解决方案2】：

尝试如下：

<a 
  download 
  href="https://stackoverflow.com/questions/69040140/get-current-web-pages-innerhtml-and-download-it-as-html-file-using-javascriptv" 
/>

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

【讨论】：

我已经添加了代码框链接...你可以检查一次吗？