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官網的方法。