The method of clicking to download images in Vue can be implemented using the download attribute of the <a> tag in HTML5 or through JS.
Use the download attribute of the <a> tag to set it directly in the html, for example:
<a href="/" rel="external nofollow" download>Download the picture</a>
Through JS implementation, you can use the method of creating URL objects, the code is as follows:
// Download the picture async downloadImage(e) {
// Get picture objects and canvas objects const imgUrl = /
const response = await fetch(imgUrl)
const blob = await ()
// Create a download link const url = (blob)
const link = ('a')
= url
= ''
(link)
()
(link)
// Release the Blob URL (url)
}The above code obtains the image through fetch and converts it into a blob type, then uses the creation of the download link, and uses the click() method of the created <a> tag to achieve the download, and finally removes the newly created <a> tag and the already used URL object.
Summarize
This is the article about clicking to download pictures in vue. This is all about this article. For more related vue clicking to download pictures, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!