如何在Vue中实现输入URL下载对应网页HTML文件的功能

现有代码问题修复 #

你原有代码存在以下几处需要调整的点：

• 变量名不匹配：模板input绑定的变量是urlPath，但downloadHtml方法中读取的是this.urlInput，无法正确获取输入的URL
• 文件名后缀错误：当前导出文件名为report.txt，不符合保存HTML文件的需求
• 内容编码缺失：直接拼接HTML内容到data URI中，特殊字符、中文会出现乱码或内容截断问题
• 缺少错误处理：未处理请求失败、URL为空的异常场景
• 跨域限制：浏览器同源策略禁止前端直接跨域请求第三方站点页面，同域名下的页面请求不受影响，若需要下载第三方页面内容，需通过你的服务端做代理转发。

修复后完整组件代码 #

<template>
  <div>
    <input type="url" v-model="urlPath" placeholder="请输入页面URL" />
    <button class="download_button" @click="downloadHtml">Download HTML</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      urlPath: ''
    }
  },
  methods: {
    async downloadHtml() {
      // 先校验输入的URL
      if (!this.urlPath) {
        alert('请先输入页面URL')
        return
      }
      try {
        const res = await fetch(this.urlPath)
        if (!res.ok) throw new Error('页面请求失败')
        const html = await res.text()
        this.downloadAsFile('page.html', html)
      } catch (err) {
        console.error('下载失败：', err)
        // 跨域错误提示
        if (err.message.includes('CORS')) {
          alert('跨域请求被禁止，请通过服务端代理请求该页面')
        } else {
          alert(`下载失败：${err.message}`)
        }
      }
    },   
    downloadAsFile(name, text) {
      const link = this.createDownloadableLink(name, text);
      const clickEvent = new MouseEvent('click');
      link.dispatchEvent(clickEvent);
      // 释放内存避免泄漏
      URL.revokeObjectURL(link.href)
    },
    createDownloadableLink(fileName, content) {
      // 用Blob处理内容，避免编码问题和大文件限制
      const blob = new Blob([content], { type: 'text/html' })
      let link = document.createElement("a");
      link.download = fileName;
      link.href = URL.createObjectURL(blob);
      return link;
    }
  }
}
</script>

跨域场景适配方案 #

如果需要下载第三方站点的HTML内容，你需要在自己的服务端新增一个代理接口：

1. 前端把要请求的URL传给你的服务端接口
2. 服务端发起HTTP请求获取对应页面的HTML内容
3. 服务端把HTML内容返回给前端，再执行下载逻辑即可

内容的提问来源于stack exchange，提问作者learningMonk