jquery.wordexport.js导出宽屏模式landscape

  jquery.wordexport.js导出宽屏模式landscape word文档,默认jquery.wordexport.js导出是竖屏模式portrait的word文档。解决办法就是定义内容容器的size样式就行,宽度大于高度,切换到视图为页面视图时就变为宽屏模式了,jquery.wordexport.js导出的是html格式的内容,所以默认格式为Web版式视图,所以得人工切换视图模式,效果如下

jquery.wordexport.js导出宽屏模式landscape

jquery.wordexport.js修改如下

if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
    (function($) {
        $.fn.wordExport = function (fileName, isLandcape) {//新增参数isLandcape,如果为true就是宽屏的
            fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
            var static = {
                mhtml: {
                    top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
                    head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n" +
                        //定义宽频样式,宽度高度可以自己修改
                        (isLandcape?"<style>\n@page landscape{size:841.9pt 595.3pt;}.landscape{page:landscape;}\n</style>":"")+
                        "\n\n<style>\n_styles_\n</style>\n</head>\n",
                    body: "<body><div class=\"landscape\">_body_</div></body>"//内容用div括起新增landscape样式,直接用body测试无效
                }
            };
//....原来的其他代码

DEMO

<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script src="/demo/wordexport/FileSaver.js"></script>
<script src="/demo/wordexport/jquery.wordexport.js"></script>
<div id="dvCT">
    <div>  北京时间7月8日凌晨2点,2018年世界杯1/4决赛在<a href="http://center-travel.cn" target="_blank" rel="nofollow">俄罗斯</a>最南端的城市&mdash;&mdash;<a href="http://center-travel.cn" target="_blank" rel="nofollow">索契</a>(Sochi)的菲什特奥林匹克体育场(Fisht Olympic Stadium)激烈进行,东道主俄罗斯队迎战克罗地亚队,他们渴望能在黑海之滨击退强敌,重现半个多世纪前先辈们杀入世界杯四强的荣光!克罗地亚美女总统科琳达&middot;格拉巴尔-基塔罗维奇(Kolinda Grabar-Kitarovic)亲临索契为球队加油助威。虽然最后俄罗斯点球负于克罗地亚遗憾出局,但用球队主帅切尔切索夫(Stanislav Cherchesov)的话来说,俄罗斯已经&ldquo;证明了自己的价值&rdquo;。</div>
    <div style="text-align: center;"><br /><img src="http://lvyou168.cn/upload/20180709/162426593.jpg" style="margin:0px 0px" width="600" height="400" alt="" /><br /><span style="color: rgb(102, 102, 102);"><span style="font-size: 12px;">菲什特奥林匹克体育场被永载史册</span></span><br />&nbsp;</div>
</div>
导出
<div class="op"><a class="landscape">宽屏模式landscape</a> <a class="portrait">竖屏模式portrait</a></div>
<script>
    $('div.op a').click(function () {
        $('#dvCT').wordExport('hello', this.className == 'landscape')
    })
</script>

 


原创文章,转载请注明出处:jquery.wordexport.js导出宽屏模式landscape

评论(0)Web开发网
阅读(79)喜欢(0)JavaScript/Ajax开发技巧