美文网首页
JavaScript之实现页面打印(整体、局部)

JavaScript之实现页面打印(整体、局部)

作者: Cute_小肥鸡 | 来源:发表于2021-03-17 18:19 被阅读0次

    1、整体打印

    var newWindow = window.open();
    newWindow.document.write(document.getElementById("output").innerHTML);
    newWindow.print();
    

    2、局部打印

    有两个地方需要注意:
    A、CSS的@media print {}里面添加不需要打印(display:none) 和 要打印(display:block) 的DIV;
    B、如果页面有导航条的话,最好给页面的导航条一个id,这样在打印的时候,才不会出现导航条

    //html
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta charset="utf-8" />
        <meta name="description" content="overview &amp; stats" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        {% if cataID != 0 %}
        <title>{{ cataInfo['FNodeName'] }} - 墨咚创作</title>
        {% else %}
        <title>{{ kbInfo['FKBName'] }} - 墨咚创作</title>
        {% endif %}
        <meta name="description" content="{{ seoText['MDKB']['description'] }}">
        <meta name="keywords" content="{{ seoText['MDKB']['keywords'] }}">
    
        {% include 'common/styles.html' %}
        <link rel="shortcut icon" href="{{ context_path }}statics/images/mo-favicon.ico" type="image/x-icon" />
        <link rel="stylesheet" href="{{ context_path }}statics/css/knowledge.css?v={{ version }}"/>
        <link rel="stylesheet" href="{{ context_path }}statics/css/commonClass.css?v={{ version }}"/>
        <link rel="stylesheet" href="{{ context_path }}statics/css/iconstyle.css?v={{ version }}">
        <link rel="stylesheet" href="{{ context_path }}statics/lib/css/simditor/simditor.css?v={{ version }}">
        {% include 'common/scriptsnew.html'%}
        <style>
            .layout-container {max-width: 1056px;padding-left: 16px;padding-right: 16px;margin-left: auto;margin-right: auto;height: 100%;}
            @media print {
                #docP_docHeaderDiv, .doc.wrapperDocDiv .doc-aside, .doc.wrapperDocDiv .main-wrapper-doc-article .meta.clearfix, .doc.wrapperDocDiv .main-wrapper-doc-article .wrapperNextDiv, .doc.wrapperDocDiv .doc-comment{
                    display: none;
                }
                #docP_article .startPrinting{display: block;}
                .main-wrapper-doc .wrapperDocDiv .doc-contents .doc-article{max-width: 100%;width: 100%;}
            }
        </style>
    </head>
    
    <body class="knowledgeBody" u_i="{{ userInfo['FID'] }}">
        <input name="kbID" value="{{ kbID }}" class="hide">
        <input name="cataID" value="{{ cataID }}" class="hide">
        <div class="lark">
            <div class="main-wrapper">
                <div class="main-wrapper-doc">
                    <div class="docHeaderDiv clearfix doc-head doc-head-affixed" id="docP_docHeaderDiv">
                        <div class="doc-head-inner">
                            <div class="header-crumb">
                                <div class="lark-breadcrumb-logo">
                                    <a href="{{context_path}}creation/explore" class="lark-logo"><!-- style="vertical-align:sub;" -->
                                        <!--<img src="{{context_path}}statics/images/mdknowledge.png" alt="知识库" class="lark-logo-simple">-->
                                        <img src="{{ context_path }}statics/images/home/mdchuangzuo.png" alt="知识库" class="lark-logo-simple">
                                    </a>
                                    <a href="{{context_path}}creation/explore" class="comm_logoText">墨咚创作</a>
                                    <!--<span class="lark-breadcrumb-separator">
                                        <span class="larkicon larkicon-arrow-right fa fa-angle-right"></span>
                                    </span>-->
                                </div>
                                <div class="lark-breadcrumb">
                                    <div class="ant-breadcrumb">
                                        <span>
                                            {% if kbInfo['FBelongtoType'] == 1 %}
                                            <a class="ant-breadcrumb-link" href="javascript:;">
                                                <span class="">{{ kbInfo['FTeamName'] }}</span>
                                            </a>
                                            {% elseif kbInfo['FBelongtoType'] == 2 %}
                                            <a class="ant-breadcrumb-link" href="{{ context_path }}pub/teamHomePage/{{ kbInfo['FTeamID'] }}">
                                                <span class="">{{ kbInfo['FTeamName'] }}</span>
                                            </a>
                                            {% endif %}
                                            <span class="ant-breadcrumb-separator">
                                                <span class="larkicon larkicon-arrow-right fa fa-angle-right"></span>
                                            </span>
                                        </span>
                                        <span>
                                            <a class="ant-breadcrumb-link"  href="{{ context_path }}pub/klInfo/{{ kbInfo['FID'] }}">
                                                <span class="">{{ kbInfo['FKBName'] }}</span>
                                                {% if kbInfo['FIsOpen'] == 0 %}
                                                <span><span class="larkicon larkicon-lock fa fa-lock"></span></span>
                                                {% endif %}
                                            </a>
                                            {% if cataID != 0 %}
                                            <span class="ant-breadcrumb-separator">
                                                <span class="larkicon larkicon-arrow-right fa fa-angle-right"></span>
                                            </span>
                                            {% endif %}
                                        </span>
                                        {% if cataID != 0 %}
                                        <span>
                                            <a class="header-crumb-doc" href="{{context_path}}creation/doc/preview/{{ kbInfo['FID'] }}/{{ cataID }}"><!-- href="{{context_path}}mdkb/Document/docPreview?k_i={{ kbInfo['FID'] }}&c_i={{ cataID }}" -->
                                                <span class="lark-breadcrumb-current">
                                                    <span class="doc-title" title="{{ cataInfo['FNodeName'] }}">{{ cataInfo['FNodeName'] }}</span>
                                                </span>
                                            </a>
                                            <span class="ant-breadcrumb-separator">
                                                <span class="larkicon larkicon-arrow-right fa fa-angle-right"></span>
                                            </span>
                                        </span>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                            <div class="header-action">
                                {% if cataID != 0 %}
                                <div class="header-action-item header-action-item-markbutton">
                                    <button class="btn btn-default dp_setCollectionBtn" f_i="{{ collectionRes['collID'] }}">
                                        {% if collectionRes["collID"] is empty %}
                                        <span class="text">收&nbsp;&nbsp;藏</span>
                                        {% else %}
                                        <span class="text">已收藏</span>
                                        {% endif %}
                                    </button>
                                </div>
                                <span class="header-action-item header-action-item-share">
                                    <div class="lark-popover dropmenu-doc-share">
                                        <button class="btn btn-default btn-doc-share"><span>分&nbsp;&nbsp;享</span></button>
                                    </div>
                                </span>
                                <span class="header-action-item">
                                    <a href="{{ context_path }}creation/doc/edit/{{ kbID }}/{{ cataID }}" class="btn btn-primary">编&nbsp;&nbsp;辑</a>
                                </span>
                                {% endif %}
                                <span class="header-action-item" style="margin-right: 10px;">
                                    <div class="larkicon-more">
                                        <div class="btn-group">
                                            <div data-toggle="dropdown" class="dropdown-toggle">
                                                <img src="{{context_path}}statics/images/more.png" style="margin-top: -9px;">
                                            </div>
                                            <ul class="dropdown-menu pull-right comment-drop">
                                                <li class="createDoc">
                                                    <a href="{{ context_path }}creation/doc/edit/{{ kbID }}/0">新建文档</a>
                                                </li>
                                                {% if cataID != 0 %}
                                                <li>
                                                    <a>演示</a>
                                                </li>
                                                <li class="fullScreenDoc">
                                                    <a>全屏</a>
                                                </li>
                                                <li>
                                                    <a>复制和移动</a>
                                                </li>
                                                <li>
                                                    <a>查看历史版本</a>
                                                </li>
                                                <li class="exportDoc">
                                                    <a>导出</a>
                                                </li>
                                                <li class="printDoc">
                                                    <a>打印</a>
                                                </li>
                                                <li>
                                                    <a>删除</a>
                                                </li>
                                                {% endif %}
    
    
    
                                                <!--<li class="createDoc">
                                                    <a href="{{ context_path }}creation/doc/edit/{{ kbID }}/0">新建文档</a>
                                                </li>
                                                {% if cataID != 0 %}
                                                <li class="exportDoc">
                                                    <a href="{{ cataInfo['FPath'] }}" download>导出</a>
                                                </li>
                                                <li class="fullScreenDoc">
                                                    <a href="javascript:;">全屏</a>
                                                </li>
                                                <li class="printDoc">
                                                    <a href="javascript:;">打印</a>
                                                </li>
                                                {% endif %}-->
                                            </ul>
                                        </div>
                                    </div>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="doc wrapperDocDiv doc-wrapper">
                        <div class="doc-aside">
                            <div class="doc-aside-wrapper">
                                <div class="doc-aside-back"><span class="larkicon larkicon-tocclose"></span></div>
                                <div class="doc-aside-catalog">
                                    <div class="book-catalog-title">
                                        <h4>目录</h4>
                                        <div class="btn-group comm_dropDiv ca_docP_btn-group">
                                            <div class="dropdown-toggle" data-toggle="dropdown">
                                                <span class="ca_docP_btn-group-icon icon-JH-0"></span>
                                            </div>
                                            <ul class="dropdown-menu pull-right comment-drop docP_ULMenu">
                                                <li class="newFile"><a href="{{ context_path }}creation/doc/edit/{{ kbID }}/0">新建文档</a></li>
                                                <li class="import"><a>导入</a></li>
                                                <li class="externalLink" data-target="#docP_externalLinkModal" data-toggle="modal"><a>添加链接</a></li>
                                                <li class="divider" style="margin: 0px;"></li>
                                                <li class="newGroup"><a>新建分组</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="book-catalog">
                                        <div class="catalog">
                                            {% for CL in cataList %}
                                            {% if CL['FNodeType'] == 1 or CL['FNodeType'] == 4 %}
                                            <div class="catalogLi catalogLi-{{ CL['FID'] }}" c_i="{{ CL['FID'] }}">
                                                <span class="catalog-item catalog-item-1 {% if CL['FID'] == cataID %}catalog-item-active{% endif %}">
                                                    <span class="name">
                                                        <a title="{{ CL['FNodeName'] }}" href="{{context_path}}creation/doc/preview/{{ kbID }}/{{ CL['FID'] }}">{{ CL['FNodeName'] }}</a>
                                                    </span>
                                                    <div class="index-module_catalogItemActions">
                                                        <div class="btn-group comm_dropDiv docP_btn-group">
                                                            <div class="dropdown-toggle" data-toggle="dropdown">
                                                                <span class="docP_btn-group-icon icon-JH-0"></span>
                                                            </div>
                                                            <ul class="dropdown-menu pull-right comment-drop docP_ULMenu" style="margin-top: 4px;">
                                                                <li class="newFile"><a href="{{ context_path }}creation/doc/edit/{{ kbID }}/0">新建文档</a></li>
                                                                <li class="import"><a>导入</a></li>
                                                                <li class="externalLink" data-target="#docP_externalLinkModal" data-toggle="modal"><a>添加链接</a></li>
                                                            </ul>
                                                        </div>
                                                        <div class="btn-group comm_dropDiv docP_btn-group">
                                                            <div class="dropdown-toggle" data-toggle="dropdown">
                                                                <span class="docP_btn-group-icon fa fa-ellipsis-v"></span>
                                                            </div>
                                                            <ul class="dropdown-menu pull-right comment-drop docP_ULMenu1" style="margin-top: 4px;">
                                                                <li class="rename"><a>重命名</a></li>
                                                                <li class="move"><a>移动</a></li>
                                                                <li class="delete"><a>删除</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </span>
                                            </div>
                                            {% elseif CL['FNodeType'] == 2 %}
                                            <div class="catalogLi catalogLi-{{ CL['FID'] }}" c_i="{{ CL['FID'] }}">
                                                <span class="catalog-item catalog-item-1 catalog-item-title {% if CL['FID'] == cataID %}catalog-item-active{% endif %}">
                                                    <span class="name">
                                                        <span class="name-link" title="{{ CL['FNodeName'] }}">{{ CL['FNodeName'] }}</span>
                                                    </span>
                                                    <div class="index-module_catalogItemActions">
                                                        <div class="btn-group comm_dropDiv docP_btn-group">
                                                            <div class="dropdown-toggle" data-toggle="dropdown">
                                                                <span class="docP_btn-group-icon icon-JH-0"></span>
                                                            </div>
                                                            <ul class="dropdown-menu pull-right comment-drop docP_ULMenu" style="margin-top: 4px;">
                                                                <li class="newFile"><a href="{{ context_path }}creation/doc/edit/{{ kbID }}/0">新建文档</a></li>
                                                                <li class="import"><a>导入</a></li>
                                                                <li class="externalLink" data-target="#docP_externalLinkModal" data-toggle="modal"><a>添加链接</a></li>
                                                                <li class="divider" style="margin: 0px;"></li>
                                                                <li class="newGroup"><a>新建分组</a></li>
                                                            </ul>
                                                        </div>
                                                        <div class="btn-group comm_dropDiv docP_btn-group">
                                                            <div class="dropdown-toggle" data-toggle="dropdown">
                                                                <span class="docP_btn-group-icon fa fa-ellipsis-v"></span>
                                                            </div>
                                                            <ul class="dropdown-menu pull-right comment-drop docP_ULMenu1" style="margin-top: 4px;">
                                                                <li class="rename"><a>重命名</a></li>
                                                                <li class="move"><a>移动</a></li>
                                                                <li class="delete"><a>删除</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </span>
                                            </div>
                                            {% elseif CL['FNodeType'] == 3 %}
                                            <div class="catalogLi catalogLi-{{ CL['FID'] }}" c_i="{{ CL['FID'] }}">
                                                <span class="catalog-item catalog-item-1 {% if CL['FID'] == cataID %}catalog-item-active{% endif %}">
                                                    <span class="name">
                                                        <a title="{{ CL['FNodeName'] }}" href="{{ CL['FNodeURL'] }}" target="_blank">{{ CL['FNodeName'] }}</a>
                                                    </span>
                                                   <div class="index-module_catalogItemActions">
                                                       <div class="btn-group comm_dropDiv docP_btn-group">
                                                           <div class="dropdown-toggle" data-toggle="dropdown">
                                                               <span class="docP_btn-group-icon icon-JH-0"></span>
                                                           </div>
                                                           <ul class="dropdown-menu pull-right comment-drop docP_ULMenu" style="margin-top: 4px;">
                                                               <li class="newFile"><a href="{{ context_path }}creation/doc/edit/{{ kbID }}/0">新建文档</a></li>
                                                               <li class="import"><a>导入</a></li>
                                                               <li class="externalLink" data-target="#docP_externalLinkModal" data-toggle="modal"><a>添加链接</a></li>
                                                           </ul>
                                                       </div>
                                                       <div class="btn-group comm_dropDiv docP_btn-group">
                                                           <div class="dropdown-toggle" data-toggle="dropdown">
                                                               <span class="docP_btn-group-icon fa fa-ellipsis-v"></span>
                                                           </div>
                                                           <ul class="dropdown-menu pull-right comment-drop docP_ULMenu1" style="margin-top: 4px;">
                                                               <li class="rename"><a>重命名</a></li>
                                                               <li class="move"><a>移动</a></li>
                                                               <li class="delete"><a>删除</a></li>
                                                           </ul>
                                                       </div>
                                                   </div>
                                                </span>
                                            </div>
                                            {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="doc-contents">
                            <div class="main-wrapper-doc-article">
                                <div class="doc-article">
                                    <article class="doc-article-inner" id="docP_article">
                                        <div><h1 class="doc-article-title">{{ cataInfo['FNodeName'] }}</h1></div>
                                        {% if cataID != 0 %}
                                        <div class="modong-doc-content editor-style">
                                            {{ cataInfo['FCataContent'] }}
                                        </div>
                                        {% else %}
                                        <div class="modong-doc-content">
                                            <div class="booksEmptyDiv" style="padding: 205px 0;">
                                                <div class="imgDiv"></div>
                                                <p>请点击左侧菜单,显示文档的内容</p>
                                            </div>
                                        </div>
                                        {% endif %}
                                    </article>
                                    {% if cataID != 0 %}
                                    <div class="meta clearfix">
                                        <div class="wrapperMetaDiv">
                                            <div class="meta-left">
                                                <div class="meta-item">
                                                    <span class="item">
                                                        <span class="larkicon larkicon-user fa fa-user-o"></span>
                                                        <span class="item-text">
                                                            <a href="javascript:;"><span>{{ cataInfo['FAuthor'] }}</span></a>
                                                        </span>
                                                    </span>
                                                </div>
                                                <div class="meta-item">
                                                    <span class="item">
                                                        <span class="larkicon larkicon-clock fa fa-clock-o" style="font-size: 16px;"></span>
                                                        <span class="item-text"><span>{{ cataInfo['FUpdateTime'] }}</span></span>
                                                    </span>
                                                </div>
                                                <!--<div class="meta-item">
                                                    <div class="item" title="阅读数">
                                                        <span class="larkicon larkicon-read fa fa-map-o"></span>
                                                        <span class="item-text">0</span>
                                                    </div>
                                                </div>-->
                                                <div class="meta-item">
                                                    <div class="item" title="评论数">
                                                        <span class="larkicon larkicon-comments fa fa-commenting-o"></span>
                                                        <span class="item-text">{{ replyList["replyResCount"] }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="meta-right"></div>
                                        </div>
                                    </div>
                                    {% if lastArticle is not empty or nextItem is not empty %}
                                    <div class="wrapperNextDiv">
                                        <div class="prevDiv">
                                            {% if lastArticle is not empty %}
                                            <a href="{{context_path}}creation/doc/preview/{{ lastArticle['FKBID'] }}/{{ lastArticle['FID'] }}" class="pagerA">
                                                <div class="labelDiv">
                                                    <span>上一篇</span>
                                                </div>
                                                <h6 class="titleH6">{{ lastArticle['FNodeName'] }}</h6>
                                            </a>
                                            {% endif %}
                                        </div>
                                        <div class="nextDiv">
                                            {% if nextItem is not empty %}
                                            <a href="{{context_path}}creation/doc/preview/{{ nextItem['FKBID'] }}/{{ nextItem['FID'] }}" class="pagerA">
                                                <div class="labelDiv">
                                                    <span>下一篇</span>
                                                </div>
                                                <h6 class="titleH6">{{ nextItem['FNodeName'] }}</h6>
                                            </a>
                                            {% endif %}
                                        </div>
                                    </div>
                                    {% endif %}
                                    {% endif %}
                                </div>
                                <nav class="doc-page-nav hide">
                                    <div class="doc-page-nav-toc">
                                        <div class="toc" style="height: 203px;">
                                            <ul class="directoryUL">
                                                <li class="directory-item directory-item-active">
                                                    <a class="directory-item-link directory-item-link-1" href="#7a4e8e47" title="一、什么是目录?">
                                                        <span>一、什么是目录?</span>
                                                    </a>
                                                </li>
                                                <li class="directory-item">
                                                    <a class="directory-item-link directory-item-link-1" href="#9de548a9" title="二、目录的作用">
                                                        <span>二、目录的作用</span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                            {% if kbInfo['FIsDiscuss'] == 1 and cataID != 0 %}
                            <div class="doc-comment">
                                <div class="wrapperCommentDiv">
                                    <div class="ant-card card-comments card-with-list">
                                        {% if replyList["replyRes"] is not empty %}
                                        <div class="ant-card-head">
                                            <div class="ant-card-head-wrapper">
                                                <div class="ant-card-head-title">{{ replyList["replyResCount"] }} 条回复</div>
                                            </div>
                                        </div>
                                        {% endif %}
                                        <div class="ant-card-body">
                                            {% if replyList["replyRes"] is not empty %}
                                            <div class="dynamicUserDiv">
                                                {% for RL in replyList["replyRes"] %}
                                                <div class="dynamicUserList" r_i="{{ RL['FID'] }}" u_i="{{ RL['FReplierID'] }}">
                                                    <div class="dynamicUser">
                                                        <div class="duImg pull-left">
                                                            {% if RL['FPath'] is not empty %}
                                                            <img src="{{ RL['FPath'] }}">
                                                            {% else %}
                                                            <div class="lc-avatar">
                                                                <div class="lc-avatar-30">
                                                                    <span class="lc-avatar-def ng-scope lc-avatar-def_{{ RL['lettersort'] }}">
                                                                        <div class="userName">{{ RL['namesubstr'] }}</div>
                                                                    </span>
                                                                </div>
                                                            </div>
                                                            {% endif %}
                                                        </div>
                                                        <div class="duContent">
                                                            <div class="duName">
                                                                {{ RL['FReplier'] }}<span class="duDate">{{ RL['formatTime'] }}</span>
                                                                {% if RL['FReplierID'] == userInfo['FID'] %}
                                                                <span class="duDelIcon icon-CHA-0" style="font-family: icomoon!important;"></span>
                                                                {% endif %}
                                                            </div>
                                                            <div class="replyContent">
                                                                <div class="replyContentDiv">{{ RL['FContent'] }}</div>
                                                                {% if RL["att"] is not empty %}
                                                                {% for RLAtt in RL["att"] %}
                                                                <div class="attachDiv" e_x="{{ RLAtt['ext'] }}" l_i="{{ RLAtt['FFileID'] }}">
                                                                    <div class="attachLeftDiv pull-left">
                                                                        {% if RLAtt["ext"] == "png" or RLAtt["ext"] == "jpg" or RLAtt["ext"] == "jpeg" or RLAtt["ext"] == "gif" or RLAtt["ext"] == "bmp" %}
                                                                        <img src="{{ RLAtt['FPath'] }}">
                                                                        {% elseif RLAtt.ext == "psd" %}
                                                                        <img src="{{context_path}}statics/images/filetype/psd.png">
                                                                        {% elseif RLAtt.ext == "zip" %}
                                                                        <img src="{{context_path}}statics/images/filetype/zip.png">
                                                                        {% elseif RLAtt.ext == "mp3" %}
                                                                        <img src="{{context_path}}statics/images/filetype/mp3.png">
                                                                        {% elseif RLAtt.ext == "mp4" %}
                                                                        <img src="{{context_path}}statics/images/filetype/mp4.png">
                                                                        {% elseif RLAtt.ext == "avi" %}
                                                                        <img src="{{context_path}}statics/images/filetype/avi.png">
                                                                        {% elseif RLAtt.ext == "mov" %}
                                                                        <img src="{{context_path}}statics/images/filetype/mov.png">
                                                                        {% elseif RLAtt.ext == "wmv" %}
                                                                        <img src="{{context_path}}statics/images/filetype/wmv.png">
                                                                        {% elseif RLAtt.ext == "mpeg" %}
                                                                        <img src="{{context_path}}statics/images/filetype/mpeg.png">
                                                                        {% elseif RLAtt.ext == "doc" or RLAtt.ext == "docx" or RLAtt.ext == "wps" %}
                                                                        <img src="{{context_path}}statics/images/filetype/doc.png">
                                                                        {% elseif RLAtt.ext == "xls" or RLAtt.ext == "xlsx" %}
                                                                        <img src="{{context_path}}statics/images/filetype/xls.png">
                                                                        {% elseif RLAtt.ext == "ppt" or RLAtt.ext == "pptx" %}
                                                                        <img src="{{context_path}}statics/images/filetype/ppt.png">
                                                                        {% elseif RLAtt.ext == "note" %}
                                                                        <img src="{{context_path}}statics/images/filetype/note.png">
                                                                        {% elseif RLAtt.ext == "css" %}
                                                                        <img src="{{context_path}}statics/images/filetype/css.png">
                                                                        {% elseif RLAtt.ext == "html" %}
                                                                        <img src="{{context_path}}statics/images/filetype/html.png">
                                                                        {% elseif RLAtt.ext == "txt" %}
                                                                        <img src="{{context_path}}statics/images/filetype/text.png">
                                                                        {% else %}
                                                                        <img src="{{context_path}}statics/images/filetype/no.png">
                                                                        {% endif %}
                                                                    </div>
                                                                    <div class="attachRightDiv">
                                                                        <span class="up_fileName up_dp_viewComment">{{ RLAtt['FName'] }}</span>
                                                                        <div class="viewsAndDownload" style="padding-top: 0px;">
                                                                            <span>
                                                                                {% if RLAtt["phyFSize"] is null %} 0.00 KB
                                                                                {% elseif RLAtt["phyFSize"] > 1024*1024*1024 %} {{ (RLAtt["phyFSize"]/1024/1024/1024)|number_format(2, '.', ',')}} GB
                                                                                {% elseif RLAtt["phyFSize"] > 1024*1024 %} {{(RLAtt["phyFSize"]/1024/1024)|number_format(2, '.', ',')}} MB
                                                                                {% elseif RLAtt["phyFSize"] > 1024 %} {{(RLAtt["phyFSize"]/1024)|number_format(2, '.', ',')}} KB
                                                                                {% else %} {{ RLAtt["phyFSize"] }} bytes
                                                                                {% endif %}
                                                                            </span>
                                                                        </div>
                                                                    </div>
                                                                    <div class="pull-right up_download">
                                                                        <a href="{{ RLAtt['FPath'] }}" download="{{ RLAtt['FName'] }}">下载</a>
                                                                    </div>
                                                                </div>
                                                                {% endfor %}
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                {% endfor %}
                                            </div>
                                            {% endif %}
                                            <div class="comments-form-editor col-md-12">
                                                <div class="commentDiv">
                                                    <div class="commentContentDiv">
                                                        <div class="commentInput">
                                                            <textarea id="commentContent" class="comm-input commentContent" name="commentContent" placeholder="请输入回复内容" rows="3"></textarea>
                                                        </div>
                                                        <ul class="comm-input-file-list commentAttListDiv hide"></ul>
                                                        <div class="commentIcon pull-left">
                                                            <i class="icon-IM-3 icon-expression emotion" style="padding-left: 0px;font-family: icomoon!important;"></i>
                                                            <i class="icon-ssfx-5 icon-attachment" style="font-family: icomoon!important;"></i>
                                                            <div id="comment-attUpload" class="hide"></div>
                                                        </div>
                                                        <div class="commentbtn pull-right">
                                                            <button class="btn btn-primary btn_commonClass btn_send" disabled="disabled">发送</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
        <!--预览-->
        <div id="dp_viewContent"></div>
        <!--点击头像,弹出用户信息的模态框-->
        <div class="comm_userInfoPre"></div>
        <!--模态框1:添加目录节点(暂时废弃)-->
        <div class="modal fade commonModal" id="docP_addCataModal" tabindex="-1" role="dialog" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close commonModal_close" data-dismiss="modal">
                            <i class="icon-CHA-0" style="font-family: icomoon!important;"></i>
                        </button>
                        <h5 class="modal-title commonModal_title">添加节点</h5>
                    </div>
                    <div class="modal-body" style="padding: 0px;">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="toc-editor" style="min-height: auto;">
                                    <div class="appendNodeIn"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default ed_cancelBtn" data-dismiss="modal">取消</button>
                        <button class="btn btn-primary ed_okBtn">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--模态框2:添加链接-->
        <div class="modal fade commonModal" id="docP_externalLinkModal" tabindex="-1" role="dialog" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close commonModal_close" data-dismiss="modal">
                            <i class="icon-CHA-0" style="font-family: icomoon!important;"></i>
                        </button>
                        <h5 class="modal-title commonModal_title">添加链接</h5>
                    </div>
                    <div class="modal-body" style="padding: 0px;">
                        <div class="row">
                            <div class="col-md-12">
                                <p style="color: #999;padding: 20px 30px;margin-bottom: 0px;">通过添加网页链接,可插入非本知识库的内容</p>
                                <div class="comm-row comm-form-item col-md-12">
                                    <div class="col-md-2 comm-form-item-label">
                                        <label class="comm-form-item-required" title="标题">
                                            <span class="comm-form-item-required-span">*</span>
                                            标题
                                        </label>
                                    </div>
                                    <div class="col-md-9 comm-form-item-control-wrapper">
                                        <div class="comm-form-item-control">
                                            <input type="text" name="eLink_title" class="comm-input comm-input-lg"  autocomplete="off" placeholder="未命名">
                                            <div class="form-explain"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="comm-row comm-form-item col-md-12">
                                    <div class="col-md-2 comm-form-item-label">
                                        <label class="comm-form-item-required" title="链接">
                                            <span class="comm-form-item-required-span">*</span>
                                            链接
                                        </label>
                                    </div>
                                    <div class="col-md-9 comm-form-item-control-wrapper">
                                        <div class="comm-form-item-control">
                                            <input type="text" name="eLink_url" class="comm-input comm-input-lg" autocomplete="off" placeholder="http://">
                                            <div class="form-explain"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default eLink_cancelBtn" data-dismiss="modal">取消</button>
                        <button class="btn btn-primary eLink_okBtn">确定</button>
                    </div>
                </div>
            </div>
        </div>
        <!--模态框3:删除-->
        <div class="modal fade commonModal noticeModal" id="delCataModal" tabindex="-1" role="dialog" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row commonModalRow">
                            <div class="col-md-12 commonModalCol12">
                                <div class="commonModal_noticeContent">
                                    <i class="icon-J-ts-0" style="font-family: icomoon!important;padding-right: 15px;font-size: 22px;"></i>
                                    <span>您确定要删除这项内容吗?</span>
                                </div>
                                <ul class="list-inline pull-right">
                                    <li><button class="btn btn-default" data-dismiss="modal">取消</button></li>
                                    <li><button class="btn btn-primary deleteOK">确定</button></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--模态框4:分享-->
        <div class="modal fade commonModal" id="docP_shareModal" tabindex="-1" data-backdrop="static">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close commonModal_close" data-dismiss="modal">
                            <i class="icon-CHA-0" style="font-family: icomoon!important;"></i>
                        </button>
                        <h5 class="modal-title commonModal_title">链接分享</h5>
                    </div>
                    <div class="modal-body">
                        <div class="row members-add">
                            <div class="col-md-12 select-by-link">
                                <span class="ant-input-group ant-input-group-compact">
                                    <input name="docP_linkCopyInput" class="ant-input ant-input-disabled" value="{{ domain }}/pub/preview/{{ kbID }}/{{ cataID }}" readonly="readonly" type="text" style="width: 80%;">
                                    <button class="btn btn-default docP_linkCopyBtn" style="width: 20%;margin-left: -5px;height: 32px;border-top-left-radius: 0px;border-bottom-left-radius: 0px;">
                                        复&nbsp;&nbsp;制
                                    </button>
                                </span>
                                <p class="tip">获得链接的所有人,可访问文档</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>
    
    <script type="text/javascript">
        require(['pub/docPreview'], function (p) {
            p.init();
        });
    </script>
    
    //js
    $(document).off("click",".printDoc").on("click",".printDoc",function(){
      $(".larkicon-more .btn-group").removeClass("open");
      $(".larkicon-more .dropdown-toggle").attr("aria-expanded","false");
      $("#docP_article").addClass("startPrinting");
      window.print();
    });
    

    3、效果图

    图1

    相关文章

      网友评论

          本文标题:JavaScript之实现页面打印(整体、局部)

          本文链接:https://www.haomeiwen.com/subject/vyuecltx.html