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


    });
相关推荐
EmmaGuo20156 分钟前
flutter3.7.12版本设置TextField的contextMenuBuilder的文字颜色
前端·flutter
pepedd86428 分钟前
全面解析this-理解this指向的原理
前端·javascript·trae
渔夫正在掘金28 分钟前
神奇魔法类:使用 createMagicClass 增强你的 JavaScript/Typescript 类
前端·javascript
雲墨款哥29 分钟前
一个前端开发者的救赎之路-JS基础回顾(三)-Function函数
前端·javascript
猩猩程序员29 分钟前
NAPI-RS v3:优化 Rust 与 前端 Node.js 跨平台支持
前端
艾小码30 分钟前
CSS粘性定位失效?深度解析 position: sticky 的陷阱与解决方案
前端·css
小徐_233331 分钟前
Trae 辅助下的 uni-app 跨端小程序工程化开发实践分享
前端·uni-app·trae
汪子熙32 分钟前
深入理解 TypeScript 的 /// <reference /> 注释及其用途
前端·javascript
全栈老石32 分钟前
设计师到前端不再有墙:Figma + VS Code 自动出码实践
前端·vue.js·html
GIS之路33 分钟前
GeoTools 结合 OpenLayers 实现叠加分析
前端