标签：截图 vue false html2canvas link var save event 下载

下载

yarn add html2canvas

使用

// 导入
import html2canvas from 'html2canvas'
export default {
  name: 'videos',
  components: {
    videoPlayer,
    html2canvas
  },
}

// 界面
<video-player
      id="capture"
      class="video-player vjs-custom-skin"
      ref="myplayer"
      :options="playerOptions"
      @pause="onPlayerPause($event)"
      @play="onPlayerPlay($event)"
    ></video-player>


// 文件下载方法
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);
      }
// 用id包裹起来
html2canvas(document.querySelector("#capture")).then(canvas => {
        const imgUrl = canvas.toDataURL("png"); // 获取生成的图片的url
        saveFile(imgUrl, 'image.png') //下载成功
        //完成
   })

标签：截图,vue,false,html2canvas,link,var,save,event,下载
来源： https://blog.csdn.net/CrtLife/article/details/120742980

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。