1. 下载页面div为本地图片
-
要将页面中的指定 div 下载为图片,可以使用 JavaScript 的 html2canvas 库将该 div 转换为图片,再通过设置 a 标签的 href 属性和 download 属性实现下载。
以下是一个简单的示例代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>下载div为图片</title> <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.0/html2canvas.min.js"></script> </head> <body> <div id="my-div"> <h1>Hello, world!</h1> <p>This is a div that you want to download.</p> </div> <button onclick="downloadDiv()">Download as Image</button> <script> function downloadDiv() { // 将 my-div 元素转换为 canvas html2canvas(document.querySelector("#my-div")).then(canvas => { // 创建一个新的 a 标签,设置 href 属性为 canvas.toDataURL,设置 download 属性为下载文件的名称 let a = document.createElement("a"); a.href = canvas.