JavaScript之实现页面打印（整体、局部）
2021-03-17 本文已影响0人
Cute_小肥鸡
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 & 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">收 藏</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>分 享</span></button>
</div>
</span>
<span class="header-action-item">
<a href="{{ context_path }}creation/doc/edit/{{ kbID }}/{{ cataID }}" class="btn btn-primary">编 辑</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;">
复 制
</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
