npm install --save html2canvas // 頁(yè)面轉(zhuǎn)圖片

<template>
  <div class="ReservedSucceed">
    <div id="ReservedSucceed" @click="imgBox=false">
        <div class="content" v-for="item in strList" :key="item.label">
          <p class="hide">{{item.str}}</p>
        </div>
    </div>
    <el-button type="primary" @click="imgBox=true" >網(wǎng)頁(yè)生成圖片</el-button>
    <div class="imgBox" v-show="imgBox">
      <div class="img">
        <img :src="fileId" alt="">
      </div>
      <div class="box">
        <a class="down" href download="圖片名字">請(qǐng)長(zhǎng)按保存圖片</a>
      </div>
    </div>
    
  </div>
</template>

<script>
import html2canvas from 'html2canvas'

export default {
  data() {
    return {
      fileId:"",
      imgurl: null,
      imgBox: false,
      strList:[
        {str:"要永遠(yuǎn)堅(jiān)信這一點(diǎn)：一切都會(huì)變的，無(wú)論受多大創(chuàng)傷心情多么沉重，一貧如洗也好，都要堅(jiān)持住。太陽(yáng)落了還會(huì)升起，不幸的日子總會(huì)有盡頭，過(guò)去是這樣，將來(lái)也是這樣。早安!",label:"1"},
        {str:"這是他的似水流年，不是我的。歲月如流，就如月在當(dāng)空，照著我們每一個(gè)人，但是每個(gè)人的生活都不一樣。",label:"2"},
        {str:"流水是白云的影子，月亮是太陽(yáng)的影子，黑夜是白天的影子，痛苦是愛(ài)的影子。不求你做我的影子，甘愿我做你的影子。",label:"3"},
        {str:"花開(kāi)一季，人活一世，只有時(shí)光安然無(wú)恙。那些轉(zhuǎn)正確的彎，那些流下的淚水，那些滴下的汗水，不論好壞，終究成全了現(xiàn)在的自己。",label:"4"},
        {str:"人生沒(méi)有假設(shè)，當(dāng)下即是全部。人生的幸與不幸，關(guān)鍵看你面向哪里。幸福如陽(yáng)光，不幸是陰影，有陽(yáng)光就必然有陰影。人生一邊是永無(wú)止境的追求，一邊是平淡如水的流年。不是每一次追求都能成功，不是每一次付出都有收獲。",label:"5"},
        {str:"在滄海桑田，我們就是那起舞的蝴蝶，無(wú)論今天怎樣，明天我還會(huì)在這里，路過(guò)我曾經(jīng)去過(guò)的地方，探索我未實(shí)現(xiàn)的未來(lái)，哪怕是蝴蝶飛不過(guò)滄海。",label:"6"},
        {str:"從容來(lái)去，坦然今生。無(wú)論生命給了我們什么，是雨露的滋潤(rùn)，還是陽(yáng)光的照射，是狂風(fēng)的吹拂，還是暴雨的敲打，我們都從容地接受，欣然地釋放著生命的繁麗。如果遇到的是傷痛，我們就要學(xué)會(huì)堅(jiān)忍，并因此練就釋?xiě)焉鹇涞谋灸?。如果遇到的是快?lè)，我們就幸福地綻開(kāi)笑容，并把快樂(lè)傳播。如果遇到的是黑夜，我們就和星星、月亮一起迎接每一個(gè)黎明的到來(lái)；如果遇到的是白晝，我們就盡情地去欣賞鮮花的綻放、鳥(niǎo)兒的歌唱、蝶兒的輕舞，去擁抱這個(gè)美麗而充滿生機(jī)的世界。",label:"7"},

      ]
    };
  },
  created() {
  },
  mounted() {
    //將網(wǎng)頁(yè)生成圖片
    this.htmlTocanvas();
  },
  methods: {
     //獲取截圖
     getBase64(fileId) {
      this.fileId = fileId
    },
    //頁(yè)面生成圖片(基礎(chǔ)版)
    htmlTocanvas() {
      const that = this;
      html2canvas(document.getElementById("ReservedSucceed")).then(
        async function(canvas) {
        // 第一種方法,生成base64
        // let str = canvas.toDataURL("image/png").split(",")[1];
        
        that.getBase64(canvas.toDataURL("image/png"));
        // 第二種方法,直接下載
        // canvas轉(zhuǎn)換成url，然后利用a標(biāo)簽的download屬性，直接下載，繞過(guò)上傳服務(wù)器再下載
        // 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; // 下載圖片
        }
        
      )
    },
    //頁(yè)面生成圖片(進(jìn)階版)
    htmlTocanvas1() {
      //解決生成的網(wǎng)頁(yè)圖片不清晰------預(yù)防,暫未出現(xiàn)
      const that = this;
      //創(chuàng)建一個(gè)新的canvas

      var canvas2 = document.createElement("canvas");
      // let _canvas = document.querySelector('div');
      let _canvas = document.getElementById("ReservedSucceed");

      var w = parseInt(window.getComputedStyle(_canvas).width);
      var h = parseInt(window.getComputedStyle(_canvas).height);
      //將canvas畫(huà)布放大若干倍，然后盛放在較小的容器內(nèi)，就顯得不模糊了
      canvas2.width = w * 3;
      canvas2.height = h * 3;
      canvas2.style.width = w + "px";
      canvas2.style.height = h + "px";
      //可以按照自己的需求，對(duì)context的參數(shù)修改,translate指的是偏移量
      //  var context = canvas.getContext("2d");
      //  context.translate(0,0);
      var context = canvas2.getContext("2d");

      html2canvas(document.getElementById("ReservedSucceed"), {
        canvas: canvas2
      }).then(async function(canvas) {
        // 第一種方法,生成base64
        // let str = canvas.toDataURL("image/png").split(",")[1];
        
        that.getBase64(canvas.toDataURL("image/png"));
        // 第二種方法,直接下載
        // canvas轉(zhuǎn)換成url，然后利用a標(biāo)簽的download屬性，直接下載，繞過(guò)上傳服務(wù)器再下載
        // 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; // 下載圖片
      });
    },
  }
}
</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>