vue html页面转图片

1、安装所需插件

?

1	npm install --save html2canvas // 页面转图片

2、新建页面img.vue

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161

<template>   <div class="reportWrap">     <div id="report">       <div         class="content"         v-for="item in strList"         :key="item.label"       >         <p class="hide">{{ item.str }}</p>       </div>     </div>     <div class="box">       <a         class="down"         href         download="图片名字"         @click="htmlTocanvas1"       >保存图片</a>     </div>     <!-- <div       class="imgBox"     >       <div class="img">         <img           :src="fileId"           alt=""         >       </div>       </div> -->   </div> </template> <script> import html2canvas from 'html2canvas';   export default {   data() {     return {       fileId: '',       imgurl: null,       imgBox: false,       strList: [         { str: '要永远坚信这一点：一切都会变的，无论受多大创伤心情多么沉重，一贫如洗也好，都要坚持住。太阳落了还会升起，不幸的日子总会有尽头，过去是这样，将来也是这样。早安!', label: '1' },         { str: '这是他的似水流年，不是我的。岁月如流，就如月在当空，照着我们每一个人，但是每个人的生活都不一样。', label: '2' },         { str: '流水是白云的影子，月亮是太阳的影子，黑夜是白天的影子，痛苦是爱的影子。不求你做我的影子，甘愿我做你的影子。', label: '3' },         { str: '花开一季，人活一世，只有时光安然无恙。那些转正确的弯，那些流下的泪水，那些滴下的汗水，不论好坏，终究成全了现在的自己。', label: '4' },         { str: '人生没有假设，当下即是全部。人生的幸与不幸，关键看你面向哪里。幸福如阳光，不幸是阴影，有阳光就必然有阴影。人生一边是永无止境的追求，一边是平淡如水的流年。不是每一次追求都能成功，不是每一次付出都有收获。', label: '5' },         { str: '在沧海桑田，我们就是那起舞的蝴蝶，无论今天怎样，明天我还会在这里，路过我曾经去过的地方，探索我未实现的未来，哪怕是蝴蝶飞不过沧海。', label: '6' },         { str: '从容来去，坦然今生。无论生命给了我们什么，是雨露的滋润，还是阳光的照射，是狂风的吹拂，还是暴雨的敲打，我们都从容地接受，欣然地释放着生命的繁丽。如果遇到的是伤痛，我们就要学会坚忍，并因此练就释怀生命起落的本能。如果遇到的是快乐，我们就幸福地绽开笑容，并把快乐传播。如果遇到的是黑夜，我们就和星星、月亮一起迎接每一个黎明的到来；如果遇到的是白昼，我们就尽情地去欣赏鲜花的绽放、鸟儿的歌唱、蝶儿的轻舞，去拥抱这个美丽而充满生机的世界。', label: '7' }         ]     };   },   created() {   },   mounted() {     // 将网页生成图片     this.htmlTocanvas1();   },   methods: {     // 获取截图     getBase64(fileId) {       this.fileId = fileId;       console.log('this.fileId', this.fileId);     },     // 页面生成图片(基础版)     htmlTocanvas() {       const that = this;       html2canvas(document.getElementById('report')).then(         async function(canvas) {           // 第一种方法,生成base64           // let str = canvas.toDataURL("image/png").split(",")[1];             that.getBase64(canvas.toDataURL('image/png'));         // 第二种方法,直接下载         // canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载         // document         //   .querySelector(".down")         //   .setAttribute("href", canvas.toDataURL());         // 第三种方法,生成的图片的url         // var imgurl = canvas         //   .toDataURL("image/png")         //   .replace("image/png", "image/octet-stream"); // 获取生成的图片的url         // window.location.href = imgurl; // 下载图片         }         );     },     // 页面生成图片(进阶版)     htmlTocanvas1() {       // 解决生成的网页图片不清晰------预防,暂未出现       const that = this;       // 创建一个新的canvas         var canvas2 = document.createElement('canvas');       // let _canvas = document.querySelector('div');       const _canvas = document.getElementById('report');         var w = parseInt(window.getComputedStyle(_canvas).width);       var h = parseInt(window.getComputedStyle(_canvas).height);       // 将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了       canvas2.width = w * 3;       canvas2.height = h * 3;       canvas2.style.width = w + 'px';       canvas2.style.height = h + 'px';       // 可以按照自己的需求，对context的参数修改,translate指的是偏移量       //  var context = canvas.getContext("2d");       //  context.translate(0,0);       //   var context = canvas2.getContext('2d');         html2canvas(document.getElementById('report'), {         canvas: canvas2       }).then(async function(canvas) {         // 第一种方法,生成base64         // let str = canvas.toDataURL("image/png").split(",")[1];           that.getBase64(canvas.toDataURL('image/png'));         // 第二种方法,直接下载         // canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载         document           .querySelector('.down')           .setAttribute('href', canvas.toDataURL());         // 第三种方法,生成的图片的url         // var imgurl = canvas         //   .toDataURL('image/png')         //   .replace('image/png', 'image/octet-stream'); // 获取生成的图片的url         // console.log('imgurl', imgurl);         // window.location.href = imgurl; // 下载图片       });     }   } }; </script> <style lang="scss" scoped> .ReservedSucceed {   background-color: white;   .hide {     text-indent: 1em;   }   .imgBox {     position: fixed;     top: 15%;     left: 25%;     width: 50%;     background-color: rgb(232, 236, 232);     z-index: 2;     border-radius: 20px;     padding: 5px;     .img {       padding: 10px;       img {         width: 100%;       }     }     .box {       text-align: center;       margin: 10px 0;     }   } } </style>