vue直接打印jpg

先下载依赖------npm install html2canvas

<el-button
          @click="getPdf('print', 'aa')"
          icon="el-icon-refresh"
          size="mini">
            打印JPG
        </el-button>

    <div id="print">
        <内容>
    </div>

 
install(Vue, options) {
//把你想打印区域的ID替换掉print
    Vue.prototype.getPdf = function (print) {
      var title = print
//调用Canvas方法
      html2Canvas(document.querySelector(`#${print}`), {
        allowTaint: true,
        height: document.querySelector(`#${print}`).scrollHeight,
        background: "#FFFFFF",
      }).then(function (canvas) {
       //转换成base64位的编码
        let base64 = canvas.toDataURL('image/jpg', 1.0)
        var byteCharacters = atob(
          base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "")
        );
        var byteNumbers = new Array(byteCharacters.length);
        for (var i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        var blob = new Blob([byteArray], {
          type: undefined,
        });
        var aLink = document.createElement("a");
        aLink.download = "图片名称.jpg"; //这里写保存时的图片名称
        aLink.href = URL.createObjectURL(blob);
        aLink.click();
      }
      )
    }

  }