鍍金池/ 問答/HTML5  HTML/ 前端用html2Canvas 把vue網(wǎng)頁轉(zhuǎn)換成圖片 不能下載局部的圖片,而且下

前端用html2Canvas 把vue網(wǎng)頁轉(zhuǎn)換成圖片 不能下載局部的圖片,而且下載下來的圖片沒有后綴

printOut(){

  console.log('pdf')
  html2Canvas(document.getElementById('#pdf')).then(canvas => {
      console.log('-----picture')
      console.log(canvas)
      // var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 獲取生成的圖片的url  
      var imgUri = canvas.toDataURL("image/png")
          window.location.href= imgUri // 下載圖片       
  });
},

--------------
有 (2)個問題
1.我需要獲取頁面中 div #pdf 區(qū)域部分轉(zhuǎn)換成 圖片

但是document.getElementById('#pdf')  中獲取的是整個頁面 也就是document.body部分的頁面  并轉(zhuǎn)換成了圖片

2.圖片文件是轉(zhuǎn)換 并下載下來了 但是下載下來文件是 (圖片) 沒有后綴 .png

回答
編輯回答
離觴

vue2.0 <div ref='pdf'></div> 用this.$refs.pdf獲取dom元素

不要直接用window.location.href下載圖片

var saveFile = function(data, filename){

var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = data;
save_link.download = filename;
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false,    false, false, 0, null);
save_link.dispatchEvent(event);

};
saveFile(imgUri,'filename');

2017年9月11日 17:22