一、从Vue下载文件到本地

当我们需要在Vue中实现文件下载时，可以使用第三方库FileSaver.js,使用它可以轻松地将文件保存在客户端本地。 首先，安装FileSaver.js：

npm install file-saver --save

然后在Vue中使用：

import FileSaver from 'file-saver'

定义一个下载方法：

download() {
 let file = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
 FileSaver.saveAs(file, "hello.txt");
}

点击下载按钮：

<button @click="download">下载</button>

这样就可以将"Hello,world!"保存为hello.txt文件。

二、Vue下载图片

要下载图片，我们可以使用HTML5中的一个API——Canvas，将要下载的图片绘制到Canvas上，然后将Canvas保存为图片文件。 首先，将图片绘制到Canvas上：

download() {
 let img = new Image();
 img.src = 'https://xxxxx.jpg';
 img.crossOrigin = 'anonymous';
 img.onload = function() {
   let canvas = document.createElement('canvas');
   canvas.width = img.width;
   canvas.height = img.height;
   let ctx = canvas.getContext('2d');
   ctx.drawImage(img,0,0);
   canvas.toBlob(function(blob) {
     FileSaver.saveAs(blob, 'test.jpg');
   });
 }
}

这里使用crossOrigin = "anonymous"解决跨域的问题。 然后，在Vue中使用：

import FileSaver from 'file-saver'
export default {
 methods: {
   download() {
     // 上述方法
   }
 }
}

三、下载Vue官网到本地

如果需求是对整个网站进行下载，并不只限于图片，你可以使用第三方库wget.js，它提供了完整的下载工作流，可以下载指定链接的文件。 首先，安装wget.js：

npm install -S wget

然后在Vue中使用：

import Wget from 'wget'
export default {
 methods: {
   downloadVue() {
     let download = new Wget('https://cn.vuejs.org/');
     download.on('end', function(output) {
       console.log(output);
     });
     download.on('error', function(err) {
       console.log(err);
     });
     download.start();
   }
 }
}

以上就是使用Vue下载文件、图片、整个Vue官网的方法。