js转换页面为图片并下载
时间: 2024-02-04 08:02:49 浏览: 61
要将当前页面转换为图片并下载,可以使用HTML2Canvas和FileSaver两个库。首先需要在HTML头部引入这两个库,例如:
```html
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdn.bootcss.com/FileSaver.js/1.3.8/FileSaver.min.js"></script>
```
然后在需要触发下载的按钮上绑定一个事件,例如:
```html
<button id="download-btn">下载当前页面</button>
```
```javascript
document.getElementById('download-btn').addEventListener('click', function() {
html2canvas(document.body).then(function(canvas) {
canvas.toBlob(function(blob) {
saveAs(blob, 'page.png');
});
});
});
```
上述代码中,我们使用`html2canvas`将当前页面转换为Canvas,然后使用`toBlob`方法将Canvas转换为Blob,最后使用`saveAs`方法将Blob保存为PNG格式图片并下载。注意需要在服务器环境下运行,否则可能会遇到跨域问题。
相关问题
js移动端将网页转为图片并下载
你可以使用html2canvas库将网页转换为canvas,然后再将canvas转换为图片。以下是一个示例代码:
```javascript
// 引入html2canvas库
import html2canvas from 'html2canvas';
// 获取需要转换为图片的DOM元素
const targetDom = document.querySelector('.target');
// 使用html2canvas生成canvas对象
html2canvas(targetDom).then(canvas => {
// 将canvas转换为图片并下载
const downloadLink = document.createElement('a');
downloadLink.href = canvas.toDataURL('image/png');
downloadLink.download = 'page.png';
downloadLink.click();
});
```
在这个示例中,我们首先引入了html2canvas库,然后通过querySelector方法获取了需要转换为图片的DOM元素。接着使用html2canvas生成canvas对象,并将canvas转换为图片并下载。
阅读全文