自己生成的页面,保存为图片,并下载word

自己生成的页面,保存为图片,并下载word

复制代码
 // 下载word
    $(document).on("click",".wordbtn",function(){
        var images = $('.swiper-wrapper .swiper-slide');
        var imagesData = [];
        var promises = [];
        images.each(function() {
            var promise = html2canvas(this).then(function(canvas) {
                var imgData = canvas.toDataURL('image/png');
                imagesData.push(imgData);
            });
            promises.push(promise);
        });

        Promise.all(promises).then(function() {
            var content = `
                <html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'>
                <head><meta charset='utf-8'></head>
                <body>`;
            imagesData.forEach(function(data) {
                content += `<img src='${data}'><br><br>`;
            });
            content += `<p>${$('.text1').html()}</p><p>${$('.text2').html()}</p></body></html>`;

            var blob = new Blob(['\ufeff', content], {type: 'application/msword'});
            saveAs(blob, 'document.doc');
        });


    });
相关推荐
可爱的秋秋啊7 分钟前
vue调用腾讯人脸组件封装+接口请求后端调用
前端·javascript·vue.js
程序员爱钓鱼11 分钟前
Rust 生命周期常见错误详解:看懂编译器报错并正确修复
前端·后端·rust
zhanghaha131412 分钟前
Python进阶教程:5_XML 解析 —— 新手完全指南
java·前端·数据库
绝世唐门三哥20 分钟前
CSS 虚线下划线用法指南:text-decoration 完整解析
前端·javascript·css
程序员爱钓鱼24 分钟前
Go if 判断详解
前端·后端·go
程序员黑豆27 分钟前
Java字符串拼接全解析:6种方式性能对比与实战指南
java·前端·ai编程
苏灿烤鱼32 分钟前
14MB 模型,凭什么跟 270M 对打?
javascript·python·agent
万少5 小时前
DeepSeek 昨晚刚开源了 Harness:附万少的2 万字保姆级教程
前端·后端·架构
程序员黑豆7 小时前
Java字符串详解
java·前端·ai编程
无我Code8 小时前
开发者-2026年中总结
前端·面试·程序员