Vue 如何将 HTML 页面下载到本地

在 Vue 项目开发过程中，有时我们需要实现将当前的 HTML 页面下载到本地的功能，以满足用户保存页面内容等需求。下面就为大家详细介绍几种常见的实现方式。

使用 HTML2Canvas 和 FileSaver 插件

我们需要安装这两个插件。在项目目录下运行命令 npm install html2canvas file-saver --save 进行安装。

安装完成后，在需要使用的组件中引入：

import html2canvas from 'html2canvas';
import FileSaver from 'file-saver';

接下来编写下载函数：

methods: {
    downloadPage() {
        const page = document.querySelector('body');
        html2canvas(page).then(canvas => {
            canvas.toBlob((blob) => {
                FileSaver.saveAs(blob, 'downloadedPage.html');
            }, 'image/png');
        });
    }
}

在上述代码中，html2canvas 会将指定的 DOM 元素（这里是整个页面的 body）转换为一个 canvas 元素。然后，我们将 canvas 转换为 Blob 对象，最后使用 FileSaver 的 saveAs 方法将这个 Blob 对象作为文件保存到本地，文件名是 downloadedPage.html。

使用原生方法创建临时链接下载

另一种简单的方式是创建一个临时的 a 标签链接来触发下载。

methods: {
    downloadPage() {
        const htmlContent = document.documentElement.outerHTML;
        const blob = new Blob([htmlContent], { type: 'text/html' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'downloadedPage.html';
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(url);
        document.body.removeChild(a);
    }
}

这段代码首先获取整个页面的 HTML 内容，创建一个包含该内容的 Blob 对象。接着通过 URL.createObjectURL 创建一个指向 Blob 的临时 URL，创建一个 a 标签并设置其 href 和 download 属性，将 a 标签添加到页面并模拟点击以触发下载，最后清理临时资源。

通过以上两种方法，我们可以轻松实现 Vue 项目中将 HTML 页面下载到本地的功能，开发者可以根据项目的具体需求和场景选择合适的方式。