一、从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官网的方法。
原创文章，作者：ARYWO，如若转载，请注明出处：https://www.506064.com/n/369176.html
微信扫一扫 
支付宝扫一扫 