前端用html2Canvas 把vue网页转换成图片 不能下载局部的图片,而且下载下来的图片没有后缀

Question

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 区域部分转换成 图片

但是document.getElementById('#pdf')  中获取的是整个页面 也就是document.body部分的页面  并转换成了图片  

2.图片文件是转换 并下载下来了 但是下载下来文件是 (图片) 没有后缀 .png

Answer 1

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');

Answer 2

window.location.href= imgUri+'jpg' 试试 ，我忘记了

Answer 3

您好请问您的问题解决了吗？