vue 开发中遇到的功能模块

作者: 暴躁程序员 | 来源:发表于2021-12-16 11:04 被阅读0次

1. 后端post接口以流的方式返回excel数据，前端下载成excel文件

axios 接口传参
否则乱码：responseType: 'arraybuffer',

// 结果是blob流，将流导出excel
export function outExcel() {
  return request({
    url: '/api/logistics/ucu/exportExcel',
    method: 'post',
    responseType: 'arraybuffer',
  })
}

安装依赖
cnpm install js-file-download --save
组件中使用

downloadExcel() {
      const loading = this.$loading({
        lock: true,
        text: '下载中请等待...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      api.outExcel().then(res => {
        if (res) {
          loading.close()
          this.$message.success('导出成功')
          fileDownload(res, '您需要的xls文件.xls')
        }
      })
    },

2. 后端将图片以base64格式传递，前端接收base64码后渲染页面

在模板中

<img :src="'data:image/png;base64,' + imgBase64" />

在组件中

export default {
  name: "App",
  data() {
    return {
      imgBase64: "接收的base64码"
    };
  }
};

3. vue 将网络路径图片（https）转化成base64格式图片

用canvas拷贝图片时遇到无法渲染的情况，需要转化成base64格式

定义方法

 // 定义网络图转base64的方法
    getBase64Method(url, ext, callback) {
      var canvas = document.createElement("canvas"); //创建canvas DOM元素
      var ctx = canvas.getContext("2d");
      var img = new Image();
      img.crossOrigin = "anonymous";
      img.src = url;
      var _this = this;
      img.onload = function () {
        canvas.width = img.width; //指定画板的宽度，自定义
        canvas.height = img.height; //指定画板的高度,自定义
        ctx.drawImage(img, 0, 0, img.width, img.height); //参数可自定义
        var dataURL = canvas.toDataURL("image/" + ext);
        callback.call(_this, dataURL); //回掉函数获取Base64编码
        canvas = null;
      };
      img.onerror = (e) => {
        console.log(e);
      };
    }

调用

this.getBase64Method(res.data.groupUrl, "png", (res) => {
  this.base64Img = res.split(",")[1];
});

渲染模板

<img :src="'data:image/png;base64,' + base64Img" />

4. vue 将页面内容转化成图片，并下载（只适合PC端）

参考：https://www.jianshu.com/p/0cc51943147d

安装依赖 cnpm i html2canvas -S
在组件中

<template>
  <div class="main" id="app">
    <div id="screenViewBox">
      <div class="drawContent">
      <div class="title">资金划转成功！</div>
      <div class="content">
        <div class="row">
          <div class="rowLeft">业务类型</div>
          <div class="rowRight">个人资金监管-转账</div>
        </div>
        <div class="row">
          <div class="rowLeft">买方姓名</div>
          <div class="rowRight">张三</div>
        </div>
        <div class="row">
          <div class="rowLeft">卖方姓名</div>
          <div class="rowRight">李四</div>
        </div>
        <div class="row">
          <div class="rowLeft">转出账号</div>
          <div class="rowRight">623188888888123</div>
        </div>
        <div class="row">
          <div class="rowLeft">转出户名</div>
          <div class="rowRight">张三</div>
        </div>
        <div class="row">
          <div class="rowLeft">转入户名</div>
          <div class="rowRight">李四</div>
        </div>
        <div class="row">
          <div class="rowLeft">转入卡号</div>
          <div class="rowRight">623188888888778</div>
        </div>
        <div class="row">
          <div class="rowLeft">转出金额</div>
          <div class="rowRight">20,000元</div>
        </div>
        <div class="row">
          <div class="rowLeft">大写金额</div>
          <div class="rowRight">贰万元整</div>
        </div>
      </div>
      <div class="seal">
        <img src="./assets/image/seal.png" alt="" />
      </div>
    </div>
    </div>
    <div class="btn" @click="savePoster()">
      下载
    </div>
  </div>
</template>

<script>
import Canvas2Image from "@/utils/canvas2Image.js";
import html2canvas from "html2canvas";
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {

  },
  methods: {
    savePoster() {
      let that = this;
      //打开loading
      //生成图片之前，需先将整体的滚动条隐藏掉，否则生成出来的照片会偏移
      document.getElementById("app").style.overflowY = "hidden";
      //两个参数：所需要截图的元素id，截图后要执行的函数， canvas为截图后返回的最后一个canvas
      var shareContent = document.getElementById("screenViewBox");
      var width = shareContent.offsetWidth;
      var height = shareContent.offsetHeight;
      var canvas = document.createElement("canvas");
      var scale = 5; //这里为了下载出更清晰的图片，值越大越清晰

      canvas.width = width * scale;
      canvas.height = height * scale;
      canvas.getContext("2d").scale(scale, scale);

      var opts = {
        scale: 1, //不管上面的scale是多少倍，这里只能取1，否则会显示不完全
        canvas: canvas,
        logging: true,
        width: width,
        height: height
      };
      let downloadName = "下载的图片名称";
      html2canvas(shareContent, opts).then(function(canvas) {
        //这个方式是直接将canvas保存为图片的，具体参数可自行查看源码
        var img = Canvas2Image.saveAsImage(
          canvas,
          canvas.width,
          canvas.height,
          "PNG",
          downloadName
        );
        //这个方式只是提供展示图片的功能，暂时没有用到
        var img = Canvas2Image.convertToPNG(canvas, canvas.width, canvas.height,'PNG');
         document.body.appendChild(img);

        //生成图片之前，需先将整体的滚动恢复为之前的状态
        document.getElementById("app").style.overflowY = "scroll";
      });
    }
  }
};
</script>
<style lang="less">
body {
  background: rgb(245, 245, 249);
  padding: 0;
  margin: 0;
}
.canvas {
  background: #fff;
  height: 400px;
  width: 90%;
  margin: 20px 0 0 5%;
}
.drawContent {
  position: relative;
  width: 90%;
  background: #fff;
  margin: 30px 0 0 5%;
  padding: 20px 20px 20px 40px;
  box-sizing: border-box;
  .title {
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
  }
  .content {
    padding: 30px 0 0 0;
    .row {
      display: flex;
      line-height: 150%;
      .rowLeft {
        font-size: 12px;
        color: #999999;
        font-weight: 400;
        width: 40%;
      }
      .rowRight {
        font-size: 12px;
        color: #000000;
        font-weight: 400;
      }
    }
  }
  .seal {
    position: absolute;
    right: 30px;
    bottom: 40px;
    width: 104px;
    height: 66px;
    z-index: 100;
    img {
      width: 104px;
      height: 66px;
    }
  }
}
.btn {
  margin: 40px 0 0 5%;
  width: 90%;
  background: #5A98F8;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff;
  border-radius: 6px;
}
</style>

在src/utils/canvas2Image.js中

/**
 * covert canvas to image
 * and save the image file
 */
 const Canvas2Image = (function () {
  // check if support sth.
  const $support = (function () {
      const canvas = document.createElement("canvas"),
          ctx = canvas.getContext("2d");

      return {
          canvas: !!ctx,
          imageData: !!ctx.getImageData,
          dataURL: !!canvas.toDataURL,
          btoa: !!window.btoa,
      };
  })();

  const downloadMime = "image/octet-stream";

  function scaleCanvas(canvas, width, height) {
      const w = canvas.width,
          h = canvas.height;
      if (width === undefined) {
          width = w;
      }
      if (height === undefined) {
          height = h;
      }

      let retCanvas = document.createElement("canvas");
      let retCtx = retCanvas.getContext("2d");
      retCanvas.width = width;
      retCanvas.height = height;
      retCtx.drawImage(canvas, 0, 0, w, h, 0, 0, width, height);
      // retCtx.drawImage(canvas, 0,0, w, h, 10, 10, width, height);
      return retCanvas;
  }

  function getDataURL(canvas, type, width, height) {
      canvas = scaleCanvas(canvas, width, height);
      return canvas.toDataURL(type);
  }

  // save file to local with file name and file type
  function saveFile(strData, fileType, fileName = "name") {
      // document.location.href = strData;
      let saveLink = document.createElement("a");
      // download file name
      saveLink.download = fileName + "." + fileType;
      // download file data
      saveLink.href = strData;
      // start download
      saveLink.click();
  }

  function genImage(strData) {
      let img = document.createElement("img");
      img.src = strData;
      return img;
  }

  function fixType(type) {
      type = type.toLowerCase().replace(/jpg/i, "jpeg");
      const r = type.match(/png|jpeg|bmp|gif/)[0];
      return "image/" + r;
  }

  function encodeData(data) {
      if (!window.btoa) {
          // eslint-disable-next-line no-throw-literal
          throw "btoa undefined";
      }
      let str = "";
      if (typeof data == "string") {
          str = data;
      } else {
          for (let i = 0; i < data.length; i++) {
              str += String.fromCharCode(data[i]);
          }
      }

      return btoa(str);
  }

  function getImageData(canvas) {
    const w = canvas.width,
        h = canvas.height;
    return canvas.getContext("2d").getImageData(50, 30, w, h);
}

  function makeURI(strData, type) {
      return "data:" + type + ";base64," + strData;
  }

  /**
   * create bitmap image
   * 按照规则生成图片响应头和响应体
   */
  const genBitmapImage = function (oData) {
      const biWidth = oData.width;
      const biHeight = oData.height;
      const biSizeImage = biWidth * biHeight * 3;
      const bfSize = biSizeImage + 54; // total header size = 54 bytes
      const BITMAPFILEHEADER = [
          // WORD bfType -- The file type signature; must be "BM"
          0x42,
          0x4d,
          // DWORD bfSize -- The size, in bytes, of the bitmap file
          bfSize & 0xff,
          (bfSize >> 8) & 0xff,
          (bfSize >> 16) & 0xff,
          (bfSize >> 24) & 0xff,
          // WORD bfReserved1 -- Reserved; must be zero
          0,
          0,
          // WORD bfReserved2 -- Reserved; must be zero
          0,
          0,
          // DWORD bfOffBits -- The offset, in bytes, from the beginning of the BITMAPFILEHEADER structure to the bitmap bits.
          54,
          0,
          0,
          0,
      ];

      const BITMAPINFOHEADER = [
          // DWORD biSize -- The number of bytes required by the structure
          40,
          0,
          0,
          0,
          // LONG biWidth -- The width of the bitmap, in pixels
          biWidth & 0xff,
          (biWidth >> 8) & 0xff,
          (biWidth >> 16) & 0xff,
          (biWidth >> 24) & 0xff,
          // LONG biHeight -- The height of the bitmap, in pixels
          biHeight & 0xff,
          (biHeight >> 8) & 0xff,
          (biHeight >> 16) & 0xff,
          (biHeight >> 24) & 0xff,
          1,
          0,
          24,
          0,
          0,
          0,
          0,
          0,
          biSizeImage & 0xff,
          (biSizeImage >> 8) & 0xff,
          (biSizeImage >> 16) & 0xff,
          (biSizeImage >> 24) & 0xff,
          // LONG biXPelsPerMeter, unused
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
          0,
      ];

      const iPadding = (4 - ((biWidth * 3) % 4)) % 4;

      const aImgData = oData.data;

      let strPixelData = "";
      const biWidth4 = biWidth << 2;
      let y = biHeight;
      const fromCharCode = String.fromCharCode;

      do {
          const iOffsetY = biWidth4 * (y - 1);
          let strPixelRow = "";
          for (let x = 0; x < biWidth; x++) {
              const iOffsetX = x << 2;
              strPixelRow +=
                  fromCharCode(aImgData[iOffsetY + iOffsetX + 2]) +
                  fromCharCode(aImgData[iOffsetY + iOffsetX + 1]) +
                  fromCharCode(aImgData[iOffsetY + iOffsetX]);
          }

          for (let c = 0; c < iPadding; c++) {
              strPixelRow += String.fromCharCode(0);
          }

          strPixelData += strPixelRow;
      } while (--y);

      return (
          encodeData(BITMAPFILEHEADER.concat(BITMAPINFOHEADER)) +
          encodeData(strPixelData)
      );
  };

  /**
   * saveAsImage
   * @param canvas canvasElement
   * @param width {String} image type
   * @param height {Number} [optional] png width
   * @param type {string} [optional] png height
   * @param fileName {String} image name
   */
  const saveAsImage = function (canvas, width, height, type, fileName) {
      // save file type
      const fileType = type;
      if ($support.canvas && $support.dataURL) {
          if (typeof canvas == "string") {
              canvas = document.getElementById(canvas);
          }
          if (type === undefined) {
              type = "png";
          }
          type = fixType(type);
          if (/bmp/.test(type)) {
              const data = getImageData(scaleCanvas(canvas, width, height));
              const strData = genBitmapImage(data);
              // use new parameter: fileType
              saveFile(makeURI(strData, downloadMime), fileType, fileName);
          } else {
              const strData = getDataURL(canvas, type, width, height);
              // use new parameter: fileType
              saveFile(strData.replace(type, downloadMime), fileType, fileName);
          }
      }
  };

  const convertToImage = function (canvas, width, height, type) {
      if ($support.canvas && $support.dataURL) {
          if (typeof canvas == "string") {
              canvas = document.getElementById(canvas);
          }
          if (type === undefined) {
              type = "png";
          }
          type = fixType(type);

          if (/bmp/.test(type)) {
              const data = getImageData(scaleCanvas(canvas, width, height));
              const strData = genBitmapImage(data);
              return genImage(makeURI(strData, "image/bmp"));
          } else {
              const strData = getDataURL(canvas, type, width, height);
              return genImage(strData);
          }
      }
  };

  return {
      saveAsImage: saveAsImage,
      saveAsPNG: function (canvas, width, height, fileName) {
          return saveAsImage(canvas, width, height, "png", fileName);
      },
      saveAsJPEG: function (canvas, width, height, fileName) {
          return saveAsImage(canvas, width, height, "jpeg", fileName);
      },
      saveAsGIF: function (canvas, width, height, fileName) {
          return saveAsImage(canvas, width, height, "gif", fileName);
      },
      saveAsBMP: function (canvas, width, height, fileName) {
          return saveAsImage(canvas, width, height, "bmp", fileName);
      },

      convertToImage: convertToImage,
      convertToPNG: function (canvas, width, height) {
          return convertToImage(canvas, width, height, "png");
      },
      convertToJPEG: function (canvas, width, height) {
          return convertToImage(canvas, width, height, "jpeg");
      },
      convertToGIF: function (canvas, width, height) {
          return convertToImage(canvas, width, height, "gif");
      },
      convertToBMP: function (canvas, width, height) {
          return convertToImage(canvas, width, height, "bmp");
      },
  };
})();

// Export function, used in npm
export default Canvas2Image;

vue 开发中遇到的功能模块

1. 后端post接口以流的方式返回excel数据，前端下载成excel文件

2. 后端将图片以base64格式传递，前端接收base64码后渲染页面

3. vue 将网络路径图片（https）转化成base64格式图片

4. vue 将页面内容转化成图片，并下载（只适合PC端）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

vue

vue

vue

Vue技术