html导出图片和打印

html导出图片和打印

 

打印用js自带的print即可，导出图片需要引入http://image.niunan.net/html2canvas.min.js

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    <script src="html2canvas.min.js"></script>
  
    <script type="text/javascript">  
function printContent() {
            var content = document.getElementById('print-content').innerHTML;
            var newWindow = window.open('', '打印窗口');
            newWindow.document.write('<html><head><title>打印页面</title></head><body>' + content + '</body></html>');
            newWindow.document.close();
            newWindow.print();
            newWindow.close();
        }
 
        function saveImg() {
 
 
 
            // 选择 HTML 元素
            let element = document.getElementById("print-content");
 
            html2canvas(element, {
                allowTaint: true,
                scale: 2,
                background: "#F5F5F5"
            }).then(function (canvas) {
                document.body.appendChild(canvas);
 
                let dataURL = canvas.toDataURL();
                let a = document.createElement("a");
                a.setAttribute("download", "aaa.png");
                a.setAttribute("href", dataURL);
                a.click();
                document.body.removeChild(canvas)
            });
 
 
        }
         
</script>

 

posted @   牛腩  阅读(369)  评论(0)  编辑  收藏  举报
相关博文：
· ner7下的html导出为pdf
· js中用canvas生成固定长宽的图片
· html2canvas配合printjs将页面打印出pdf
· 页面导出为PDF
· vue利用html2canvas将HTML导出为图片
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae