0

vue 截图 -转

 2 years ago
source link: http://www.hechunbo.com/index.php/archives/400.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

vue 截图

npm install html2canvas

2.页面中加入

<script>
    import html2canvas from 'html2canvas'
</script>

download() {
      // 截图下载
      html2canvas(document.getElementById('main'), {
        backgroundColor: 'white', //画出来的图片有白色的边框,不要可设置背景为透明色（null）
        useCORS: true, //支持图片跨域
        scale: 1, //设置放大的倍数
      }).then((canvas) => {
        //截图用img元素承装，显示在页面的上
        let img = new Image()
        //如果你需要下载截图，可以使用a标签进行下载
        let a = document.createElement('a')
        a.href = canvas.toDataURL('image/pdf')
        a.download = 'test'
        a.click()
      })
    },

3.要截图的区域

<div id="main">
    这里面放自己想要截图的内容区，这个容器以外的内容不会截取到。
 </div> 

 <!--start 下载按钮区 -->
    <div class="footer"><span
        @click="download">下载</span>
    </div>
 <!--end 下载按钮区 -->

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK