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