Vue导出页面为word格式

最新推荐文章于 2024-03-08 15:10:17 发布

代码无边，回头是岸

最新推荐文章于 2024-03-08 15:10:17 发布

阅读量1.3w

点赞数 1

本文链接：https://blog.csdn.net/qq_41810005/article/details/90692639

版权

1、构建页面需要的css并以js的方式导出

//构建打印页面的需要的css文件已js的形式并导出
export const cssJs =`
html,
body {
    position: relative;
    height: 100%;
}
.page_layout {
    position: relative;
    height: 100%;
    display: flex;
    & .layout_content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
}
...

2、引入css的js文件，并创建文本流，发送给后端进行处理，并返回进行解析生成下载

//添加的文件
//name要打印的页面类名，cssJs是这个页面的css

import cssJs from "../cssJs"

export function handerWord(name,cssJs){
    let html =document.getElementsByClassName(name)[0].innerHTML;// 获取要导出部分的内容
    let htmlDom = `<!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <title>标题</title>
            <link rel="stylesheet" href="https://cdn.bootcss.com/iview/2.14.0/styles/iview.css" />
            <style>
                ${cssJs}
            </style>
        </head>
        <body>
            <div class="resume_preview_page" style="margin:0 auto;width:1200px">
            ${html}
            </div>
        </body>
        </html>`;
        let htmlDom_ = new Blob([htmlDom],{ "type" : "text/html;charset=utf-8" })
        let formdata = new FormData();
        formdata.append('file', htmlDom_, `sdf.html`);//sdf.html是设置文件名
        axios({
            method: 'post',
            url: url,
            data:formdata,
            responseType:'blob',//这里如果不设置，下载会打不开文件
        }).then(res=>{
            console.log('download res',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类型
            var downloadElement = document.createElement('a');
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download ='s.doc'; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
        })
  }

代码无边，回头是岸

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
8
评论
Vue导出页面为word格式

1、构建页面需要的css并以js的方式导出//构建打印页面的需要的css文件已js的形式并导出export const cssJs =`html,body { position: relative; height: 100%;}.page_layout { position: relative; height: 100%; display:...
复制链接

扫一扫