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


    });
相关推荐
你别说话了几秒前
Vue实现高效拖拽效果 vue-Draggable
前端·vue.js
万物智能8 分钟前
PWM散热风扇设置—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
前端·后端·算法
前端柱子19 分钟前
q-floodfill白边锯齿?一招搞定抗锯齿边缘问题
前端
阿虎儿20 分钟前
我的 HTML 样板(HTML Boilerplate)
前端·html
Amos_Web25 分钟前
Rspack 源码解析(八):Module、Chunk 与 Runtime ID
前端·rust·源码阅读
彭于晏分晏30 分钟前
深入理解 Vue 3 响应式原理:从 Proxy 到依赖收集
前端
晚安日记wanna33 分钟前
Vue3 script setup 的四层追问答到第三层才算过关
前端·vue.js·面试
前端柱子40 分钟前
Chaikin‘s Corner Cutting 算法 应用canvas绘制平滑的曲线
前端
gnip43 分钟前
uts 插件示例:获取设备电量信息
前端·javascript
码上成长1 小时前
Mapbox 上用 Turf 裁多边形:屏幕贴边了,接口却说越界
前端·前端框架