html2canvas官网：http://html2canvas.hertzen.com/

html

<script type="text/javascript" src="https://zhangqh22.gitee.io/libs/jquery.min.js"></script>
<script type="text/javascript" src="https://zhangqh22.gitee.io/libs/vue/vue.min.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<div>
    <button type="button" @click="screenshot">截<br>长<br>图</button>
</div>

javascript

var app = new Vue({
    el: '#js_app',
    methods: {
      // 截图
      screenshot: function() {
          var _this = this;
          $('#js_screenshot').hide();
          // window.scrollTo(0,0); 指定区域截图防偏移
          html2canvas(document.body).then(function(canvas) {
              // window.open(URL.createObjectURL(_this.base64ToBlob(canvas.toDataURL())));
              var a = document.createElement('a')
                    var event = new MouseEvent('click')
                    a.download = Date.now();
                    a.href = URL.createObjectURL(_this.base64ToBlob(canvas.toDataURL()))
                    a.dispatchEvent(event)
              $('#js_screenshot').show();
          });
      },
      // base64转换
      base64ToBlob: function(code) {
          var parts = code.split(';base64,');
          var contentType = parts[0].split(':')[1];
          var raw = window.atob(parts[1]);
          var rawLength = raw.length;
          var uInt8Array = new Uint8Array(rawLength);
          for (var i = 0; i < rawLength; ++i) {
              uInt8Array[i] = raw.charCodeAt(i);
          }
          return new Blob([uInt8Array], { type: contentType });
      }
    }
});

参数传递

html2canvas(document.body, {
  allowTaint: false,
  useCORS: true
}).then(function(canvas) {
  // ...
})

注意：如果截图内容为空白说明有滚动条，这里可以选择copy一份放在可视区或顶部供截图使用，使用完再删除；也可以通过控制滚动条把截图内容滚动到可视区处理

• Blob 对象表示一个不可变、原始数据的类文件对象
• atob() 方法用于解码使用 base-64 编码的字符串