How to use vue to realize screenshot of web page

This article is to share with you about how to use vue to achieve web screenshots. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Install html2Canvasnpm install html2canvas-save2 and introduce import html2canvas from "html2canvas" into the required vue components 3. Write a screenshot button 4. Call the function toImage// page element to transfer the picture toImage () {/ / manually create a canvas tag const canvas = document.createElement ("canvas") / / get the parent tag It means that the DOM element in this tag generates a picture / / imageTofile is a custom ref name for the parent element within the screenshot range let canvasBox = this.$refs.imageTofile / / gets the parent's width and height const width = parseInt (window.getComputedStyle (canvasBox) .width) const height = parseInt (window.getComputedStyle (canvasBox) .height) / / width and height * 2 and magnify 2 times to prevent the picture from blurring canvas.width = width * 2 canvas.height = height * 2 canvas.style.width = width + 'px' canvas.style.height = height +' px' const context = canvas.getContext ("2d") Context.scale (2,2) Const options = {backgroundColor: null, canvas: canvas, useCORS: true} html2canvas (canvasBox Options) .then ((canvas) = > {/ / toDataURL image format to base64 let dataURL = canvas.toDataURL ("image/png") console.log (dataURL) this.downloadImage (dataURL)})} / / download downloadImage (url) {/ / if you are in the web page, you can directly create a tag to download let a = document.createElement ('a') a.href = url a.download = 'home screenshot' a.click ()}

Don't forget to add the ref attribute to the parent within the screenshot range of the page, so that canvas can find the parent to calculate the width and height and take a screenshot.

This is what the screenshot looks like:

Thank you for reading! This is the end of the article on "how to use vue to achieve web screenshots". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!