vue导出html、word原理

来源:程序思维浏览:2603次

 
今天给大家说说如何用vue导出html静态页面和word的原理。

由于导出word时,页面样式无法正常使用,因此整体页面采用table布局,仅在几个地方添加style样式,没有其余样式:

 /**
   * 当页面中有canvas时,我的做法是
   * 在页面中预先放置一个src为空的img标签
   * 点击导出时,将canvas转为base64,将之前设置的img标签的src修改为base64,同时置空canvas
   * 需要注意的是,这种情况下,当结束导出操作时,由于页面中的canvas已经替换为图片,进行获取canvas标签操作时会报错
   * 因此需要进行判断
   * 当页面中存在canvas标签时,进行转换canvas操作
   * 否则直接导出页面内容
   */
    var cv = document.getElementsByTagName("canvas")[0]; //获取canvas
        var resImg = document.getElementsByClassName("resImg")[0]; //获取包裹canvas的标签
        var cimg = document.getElementsByClassName("cimg")[0];//获取空src的img标签
         // 将canvas转为图片
         var context = cv.getContext("2d");
         var srcDataURL = cv.toDataURL("image/png");
          cimg.setAttribute("src",srcDataURL);
          resImg.innerHTML = "";
          let tableConts =document.getElementsByClassName("tablepart")[0].innerHTML;// 获取要导出部分的内容
         
        
          // 将内容补完为完整的html页面
          let html_ = `<!DOCTYPE html>
                <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width,initial-scale=1.0">
                    <link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
                    <style>
                    </style>
                </head>
                <body>
                    <div class="resume_preview_page" style="margin:0 auto;width:1200px">
                   ${tableConts}
                    </div>
                </body>
                </html>`;
      // 将html页面发送至后台进行处理
          // 构造blob文件流
            let html_ = new Blob([html_],{ "type" : "text/html;charset=utf-8" })
            let formdata = new FormData();
            formdata.append('file', html_, `sdf.html`);//sdf.html是设置文件名
            this.$axios({
              method: "post",
              data: html_,
              headers: {
              // 后台要求设置为json,使用时依据后台情况决定
                "Content-Type": "application/json"
              },

              responseType: "blob", //这里如果不设置,下载会打不开文件
              url: "http://192.168.0.125:9006/adminQuestion/exportWord"
            })
            .then(res => {
              //通过后台返回 的word文件流设置文件名并下载
              var blob = new Blob([res.data], {
                type:
                  "application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=utf-8"
              }); //application/vnd.openxmlformats-officedocument.wordprocessingml.document这里表示doc类型
              console.log(blob);
              var downloadElement = document.createElement("a");
              var href = window.URL.createObjectURL(blob); //创建下载的链接
              downloadElement.href = href;
              downloadElement.download = "a.doc"; //下载后文件名
              document.body.appendChild(downloadElement);
              downloadElement.click(); //点击下载
              document.body.removeChild(downloadElement); //下载完成移除元素
              window.URL.revokeObjectURL(href); //释放掉blob对象
            })
            .catch(err => {
              console.log(err);
            });

其实转成word还是要需要和后端程序配合的,前端负责的工作是将html转成blob类型发送给后端,后端转成word格式,前端用blob类型进行下载。
精品好课
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
收藏
扫一扫关注我们