• 使用js把html导出word,单位换算,配置样式和分页,页边距,字体及大小,行距,缩进,@page等等


    js导出html为word的方法

    getquestion:function(){
                require(['backend/FileSaver'], function(){
                    require(['backend/jquery.wordexport'], function(){
                    var sjname=$('#sjname').html()
                    $(".jquery-word-export").click(function(event) {
                        $("#pagecontent").wordExport(sjname);
                    });})
                
                });
            },
    

    引入FileSaver,再使用jquery.wordexport,html布局如下

    <div id="pagecontent">
    
          <div class="form-group">
            <h2 id="sjname" style="text-align:center">2020年7月29日阜阳市颍泉区幼儿教师招聘</h2>
            <button class="jquery-word-export btn btn-success pull-right" type='button'>导出成word</button>
          </div>
    
    <!--循环题目,我这里应该是循环文章-->
    </div>
    

    以上是自己的实现方式,有篇文章总结的也不错。有兴趣的可以看下
    1.https://www.cnblogs.com/Ananiah/archive/2019/03/26/10600297.html
    2.http://www.jq22.com/jquery-info11368

    如何格式化html文档呢?比如页眉页脚,页边距,分页等等

    有博主提供了一种思路

    关于分页

    复制下面的代码,就可以分页了

    <span lang="EN-US" style="font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:" mce_style="font-size:10.5pt;mso-bidi-font-size:12.0pt;font-family:" times="" new="" roman';mso-fareast-font-family:宋体;mso-font-kerning:1.0pt;mso-ansi-language="" en-us;mso-fareast-language:zh-cn;mso-bidi-language:ar-sa'=""><br clear="all" style="page-break-before:always" mce_style="page-break-before:always"></span>
    

    关于单位换算


    看到模板中的页边距是上下23mm,左右26mm,怎么转化成pt呢?

    1点=0.3527毫米
    所以,上下23*0.3527=8.11pt,左右26*0.3527=9.17pt
    

    关于页边距

    经分析源码,添加如下CSS代码即可:

    @page WordSection1
    	{size:595.3pt 841.9pt;
    	margin:30.0pt 30.0pt 30.0pt 30.0pt;
    	mso-header-margin:42.55pt;
    	mso-footer-margin:49.6pt;
    	mso-paper-source:0;}
    div.WordSection1
    	{page:WordSection1;}
    

    主要是那个 margin,顺序和CSS一直,上右下左
    body 中最外层 div 加 class=WordSection1

    另一个大佬的解决方法是这样的,可以学到不少东西

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>print  Geovin Du</title>
    <style type="text/css" media="screen">
    /*
    https://www.w3.org/TR/css-page-3/
    https://developer.mozilla.org/en-US/docs/Web/CSS/:first
    https://dev.opera.com/articles/
    https://www.quackit.com/css/at-rules/css_page_at-rule.cfm
    https://developers.google.com/web/tools/chrome-devtools/css/   
    涂聚文
    注:Firefox,Safari,Internet Explorer,Google Chrome,Opera 是默认的页眉是网页title  页脚:是第几页/共几页. 只有Microsoft Edge没有默认的页眉,页脚 
         
        */
    /*应用于Microsoft edge*/
        .heade,.bottom{display:none;}
        </style>
         
    <style type="text/css" media="print">
    /*每一页 如果没有另外自定义的话 */
    @page {margin-left: 50px; margin-top: 100px;}  
    /*第一页*/
    @page :first {
      margin-left: 50%;
      margin-top: 50%;
    }
    /*分页标记*/
    .geovindu{
      page-break-after: always;
    }
    .heade {margin-top: 10px;}
        </style>
    </head>
     
    <body>
    
    <div id="geovindu" class="geovindu">
    <div class="heade">页眉:涂家村</div>
    <div class="conent"> 
        First Page.
    </div>
    <div class="bottom">第一页</div>
    </div>
         
         
    <div id="geovindu" class="geovindu">
    <div class="heade">页眉:涂家村</div>
    <div class="conent">
        Second Page.
    </div>
    <div class="bottom">第二页</div>  
    </div>
    <button>Print!</button>
    
    
    <script type="text/javascript">
        document.querySelector("button").onclick = function () {
          window.print();
        }
             
            </script>
    </body>
    </html>
    
    

    @page是什么意思

    https://www.nhooo.com/css-reference/css-page-rule.html

  • 相关阅读:
    9-1058. 选择题(20)
    8-素数打表
    7- 插入与归并
    6-爱丁顿数(题意理解)
    5-单身狗(时间和空间的相互选择)
    4-1068. 万绿丛中一点红
    3-1067. 试密码
    2-素数打比表
    21-矩形的嵌套
    maven设置打jar包并引入依赖包
  • 原文地址:https://www.cnblogs.com/cn-oldboy/p/13611545.html
Copyright © 2020-2023  润新知