Requirements: Make business cards and export business cards to download locally

The first thing that comes to mind is how to convert part of the page content into pictures. After querying the documents, IT is found that html2Canvas plug-in can achieve this function

Solution steps:

1. Install HTML2Canvas The official document can refer to HTML2Canvas

Introduction method:

npm install –save html2canvas

Or:

yarn add html2canvas

2.. Introduce HTML2Canvas into the component

Once the plug-in is installed, add it to the VUE component you need to use as follows:

import html2canvas from “html2canvas” 3. First, you need html2Canvas to get the content of the node you want to convert, so you need to add the ref tag. Here is an example (you must put the content you want to export into the div of ref) :

<div class="scan-card-container" ref="imageWrapper"> <div class="scan-card"> <div class="header"> <img :src="`${logoUrl}? ${new Date().getTime()}`" class="logo-img" crossOrigin="anonymous" > <img :src="`${avatarUrl}? ${new Date().getTime()}`" class="img-avatar" crossOrigin="anonymous" > </div> </div> </div>Copy the code

The complete code

html

<div class="scan-card-container" ref="imageWrapper"> <div class="scan-card"> <div class="header"> <img :src="`${logoUrl}? ${new Date().getTime()}`" class="logo-img" crossOrigin="anonymous" > <img :src="`${avatarUrl}? ${new Date().getTime()}`" class="img-avatar" crossOrigin="anonymous" > </div> <div class="card-info"> <div class="card-name"> {{ form.name }} </div> <div> {{ form.post }} </div> <div class="line" /> <div> {{ form.address }} </div> <div class="card-phone"> {{ form.phone }} </div> <div class="qr-code" id="qrCodeCard" ref="qrCodeCardUrl" /> </div> </div> </div> <div class="dialog-footer"> <el-button size="small" type="primary" @click="onExport" id="onExport"> Export < / el - button > < / div >Copy the code

script

import html2canvas from 'html2canvas'; onExport() { const clientWidth = this.$refs.imageWrapper.offsetWidth; const clientHeight = this.$refs.imageWrapper.offsetHeight; const kh = [clientWidth, clientHeight]; html2canvas(this.$refs.imageWrapper, { useCORS: true, logging: true }).then((canvas) => { const dataURL = canvas.toDataURL('image/png'); this.download(dataURL, kh); }); }, getUrlBase64(url, kh) { return new Promise((resolve) => { let canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.crossOrigin = 'Anonymous'; Img. SRC = url; img.onload = () => { // eslint-disable-next-line prefer-destructuring canvas.height = kh[1]; // eslint-disable-next-line prefer-destructuring canvas.width = kh[0]; ctx.drawImage(img, 0, 0, kh[0], kh[1]); const dataURL = canvas.toDataURL('image/png'); canvas = null; resolve(dataURL); }; }); }, download(imgUrl, kh) { this.getUrlBase64(imgUrl, kh).then((base64) => { const link = document.createElement('a'); link.href = base64; Link. Download = ` ${this. CurrentRobot. Nickname} card. PNG `; link.click(); }); },Copy the code

advice

The background of the generated image is white by default. You can change the backgroundColor using the backgroundColor property as follows:

Html2canvas (this.$refs.imageDom, {backgroundColor: null // null to set the background to transparent})Copy the code

1. The picture is from the remote server, there is no problem in display, but the picture will not be displayed when exported. Solutions:

 html2canvas(this.$refs.imageWrapper ).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png');
        this.download(dataURL, kh);
      });
      
Copy the code

Add {useCORS: true, logging: true} to:

html2canvas(this.$refs.imageWrapper, { useCORS: true, logging: true }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png');
        this.download(dataURL, kh);
      });
Copy the code

Then add the dynamic time to the SRC of the image and add crossOrigin=”anonymous” to allow cross-domain

<img :src="`${avatarUrl}? ${new Date().getTime()}`" class="img-avatar" crossOrigin="anonymous" >Copy the code

2. Some CSS styles are unrecognizable, such as box-shadow.

These CSS attributes are not currently supported

Background blend mode * border image * box decoration break box shadow filter font variant hyphen * Blend mode object fit repeat linear gradient () writing mode * soaring