自己生成的页面,保存为图片,并下载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');
        });


    });
相关推荐
苏灿烤鱼几秒前
GitHub #2 拆解|把工程经验装进 Agent,为什么仍会“静默失效”?
javascript·人工智能·agent
90后的晨仔4 分钟前
uni-app 生命周期深度解析(iOS / Android / 鸿蒙 / Vue3 四端对照)
前端
钛态2 小时前
AI 辅助:前端框架反模式:过度封装、状态滥用与副作用失控
前端·vue·react·web
by__csdn2 小时前
Vue vs React vs Angular:前端框架终极对决
前端·vue.js·react.js·前端框架·vue·react·angular
钛态2 小时前
前端框架选型决策框架:React、Vue、Svelte、Solid 的 2026 年横评
前端·vue·react·web
2501_926102862 小时前
深入浅出Vue.js前端框架设计:核心原理与实践指南
前端·vue.js·前端框架
程序员黑豆3 小时前
使用AI编程开发鸿蒙应用:从环境搭建到实战示例
前端·harmonyos
程序员黑豆6 小时前
鸿蒙应用开发:一次开发多端部署之响应式布局完全指南
前端·harmonyos
小月土星7 小时前
2.0 React Router 前端路由深度解析:从传统后端路由到现代 SPA 的完整演进
前端
To_OC8 小时前
LC 35 搜索插入位置:二分查找谁都会,边界条件谁写谁懵
javascript·算法·leetcode