前端用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