// 聲明一個畫布元素,存儲需下載圖片范圍
let canvas = document.createElement("canvas");
// 獲取需下載范圍元素
let img = this.$refs["QRcodeSrcImg"];
// 圖片高度
var w = parseInt(window.getComputedStyle(img).width);
// 圖片寬度
var h = parseInt(window.getComputedStyle(img).height);
// 聲明畫布寬高
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
// 利用 html2canvas 下載 canvas
html2canvas(img, { canvas: canvas }).then(function(canvas) {
  const a = document.createElement("a");
  // 文件名
  a.download = name | 'html2canvas';
  // 設(shè)置 a href 屬性
  a.setAttribute("href", canvas.toDataURL());
  // 觸發(fā) a 點(diǎn)擊事件
  a.click();
});

如果需下載圖片范圍中存在從服務(wù)器獲取到的圖片，則需要把圖片轉(zhuǎn)換成base64格式才可以下載，不然下載的圖片會出現(xiàn)空白
圖片轉(zhuǎn)base64

// 圖片下載
var image = new Image();
// 如果圖片是跨域的，填上"*"或者"anonymous" 核心是請求頭中包含了 Origin: "anonymous"或"*" 字段，
//響應(yīng)頭中就會附加上 Access-Control-Allow-Origin: * 字段,
image.crossOrigin = "anonymous"; image.src = url;
// 路徑加載
image.onload = function() {
  var ext = url.substring(url.lastIndexOf(".") + 1);
  var base64 = getBase64Image(image, ext);
  _this.QRcodeSrc = base64;
};
// 圖片轉(zhuǎn) base64 格式
function getBase64Image(image, ext) {
  var canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;
  var context = canvas.getContext("2d");
  context.drawImage(image, 0, 0, image.width, image.height);
  var base64 = canvas.toDataURL("image/" + ext);
  return base64;
}