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


    });
相关推荐
Java后端的Ai之路4 分钟前
03_React_JSX
前端·react.js·前端框架
百度一下吧15 分钟前
断网后 WebView 加载单页面应用:页面跳转 JS 加载失败的处理方案
开发语言·javascript·ecmascript
颜进强23 分钟前
26 · NestJS 基础篇 · 全专栏总结:五个阶段,一次收拢
前端·后端·ai编程
风寄巴山秋24 分钟前
OpenBMC:Web 页面功能异常排查
运维·服务器·前端·架构
程序员Sunday1 小时前
Promise.all、allSettled、race、any 怎么选,失败后其他请求会怎样
开发语言·前端·javascript
niucloud-admin1 小时前
JAVA V6 多商户商城 开发文档——管理端前端
前端
weixin_422201301 小时前
如何解决小程序图标点击热区小,落点不准问题?
前端·小程序·样式·点击热区·扩大
szial2 小时前
JavaScript 的 call、apply 和 bind:如何控制函数调用
开发语言·前端·javascript
。小二2 小时前
Go 泛型并发利刃:async 库深度评测——370K ops/s、零依赖、生产就绪
开发语言·javascript·golang
CopyCode2 小时前
Agent 开发不是模型训练:一个前端的入门认知
前端·llm·agent