Vue下载图片到本地

一、从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官网的方法。