前言

随着在线办公场景越来越多，同时需要各式各样办公软件，在开发时就用得到在线文档来内容指定某人填写、审批、传阅文件，文件导出、打印成纸盖章等。所以需要功能较为强大、复杂的文档编辑器，前两篇文章我们已经教大家如何制作分页的文档编辑器，这篇文章我们把功能补全，教大家做好的文档怎么添加自定义页眉、打印。

老样子在教程开始前先上demo，有图有真相，在线demo让你看了是否是您想要的东西，不用浪费您半天时间，看了一推无用东西。

一、自定义页眉内容

在vue+ts在线文档编辑(腾讯文档)多人在线编辑-实现假分页（二）基础上加入页眉内页。

首先添加组件 pageHeader.vue 文件，代码如下：

<template><div class="editor-headerbox" ><div class="left"><table class="headertable"><tr><td>单位</td><td>天文台检查站</td><td>监管单位</td><td>中国</td></tr><tr><td>文件编号</td><td>488 </td><td>页码</td><td><div style="display: flex; justify-content: center; align-items: center;">第{{page}}页 / 共{{total}}页</div>  </td></tr></table></div><div class="right"><img src="@/assets/logo.jpg" /></div></div>
</template>
<script lang="ts">
import { defineComponent, ref, computed, unref } from 'vue';export default defineComponent({name: 'pageHeader',components: { },props:{page:{type: Number,default:1},total:{type: Number,default:1},},emits: ['success'],setup() {return { };},});
</script>
<style lang="scss" scoped>//页眉.editor-headerbox{display: flex;padding: 0px 40px;height: 100px;user-select: none;.left{flex:1;text-align: left;display: flex;align-items: center;.headertable{border-collapse: separate;border-spacing: 0;border-top: 1px solid #000000;border-left: 1px solid #000000;td{padding: 5px 10px;border: 1px solid #000000;border-top: none;border-left: none;}}}.right{text-align: right;img{height: 100%;cursor: pointer;pointer-events: auto;}}}
</style>

在编辑器直接引入：

import pageHeader from './component/pageHeader.vue'

二、分页文档打印

1.加入分页符

由于文档按word的A4纸尺寸分页，在打印的时候也是按照A4大小分页打印，在预览的页符加打印分页属性，下图处的分隔符添加css属性（page-break-after:always;）

完整代码如下：

<div class="editor-page-list" ><template v-for="item in pageCount"><div class="editor-logic-page logc-page-box" ><!--页眉--><div class="header-page page_wrapper" ><pageHeader :page="item" :total="pageCount"></pageHeader></div><!--页脚--><div class="footer-page page_wrapper"><div class="pagetext">-第{{item}}页-</div></div></div><div class="melo-page-gap" v-if="item!=pageCount" style="page-break-after:always; width: 100%; height: 23px; pointer-events: auto;"></div></template>
</div>

2.打印方法

打印直接选用浏览器内置的打印方法（建议使用google和微软Microsoft Edge浏览器），代码如下：

const doPrint=()=>{window.print(); //打印刚才新建的网页return false;
}

3.打印模块完整代码

vue 、ts代码如下：

<!--填写质量文件-->
<template><!-- <div class=" form-widget-main"> --><div class="form-widget-container" :style="{height:'100%'}"><el-button type="primary" class="savebtn" @click="printFile" circle >印</el-button><div class="editor-container-box"  :style="{height:pageRaelheight+'px'}"><div class="editor-content" id="editor-content" :style="{height:pageRaelheight+'px'}" ><div class="editor-page-list" ><template v-for="item in pageCount"><div class="editor-logic-page logc-page-box" ><!--页眉--><div class="header-page page_wrapper" ><pageHeader :page="item" :total="pageCount"></pageHeader></div><!--页脚--><div class="footer-page page_wrapper"><div class="pagetext">-第{{item}}页-</div></div></div><div class="melo-page-gap" v-if="item!=pageCount" style="page-break-after:always; width: 100%; height: 23px; pointer-events: auto;"></div></template></div><!--编辑器--><div ref="containerRef" style="padding-top:100px;padding-bottom: 40px;" ></div><div class="editor-pagebg-list" ><template v-for="item in pageCount"><div class="editor-bg-page" ></div></template></div></div></div></div><!-- </div> --></template><script lang="ts"  >import { defineComponent, onMounted, reactive,ref,nextTick, toRefs } from 'vue';import { getDocValue, getPluginValue,getDemoData} from "../pageEditor/script/index";//数据存储本地import { cards, plugins, pluginConfig } from "../FileEditor/script/config";//数据import { inputItem} from '../FileEditor/script/data';//打印import { pageHeader } from '../pageEditor/component'//编辑器import Engine, {$,EngineInterface,} from "@aomao/engine";//方法
import { WaterMark } from '../pageEditor/script/commom';export default defineComponent({name: 'pagePrint',// 注册组件components: {pageHeader,},setup() {const winHeight=ref(document.documentElement.clientHeight-0)//获取组件数据const plugindata=getPluginValue()||''const pluginList=ref<inputItem[]>([])//  console.log('获取组件：', plugindata)if(plugindata&&plugindata!="undefined"){pluginList.value=JSON.parse(plugindata)}// 编辑器容器const containerRef = ref<HTMLElement | null>(null);// 编辑器引擎const engine = ref<EngineInterface | null>(null);// 默认设置为当前在加载中const loading = ref(true);onMounted(() => {document.title="质量文件编辑器-分页打印测试"// 容器加载后实例化编辑器引擎if (containerRef.value) {const engineInstance = new Engine(containerRef.value, {// 启用的插件plugins,// 启用的卡片cards,readonly:true,lazyRender:false,// 所有的卡片配置config: pluginConfig,});const value = getDocValue() || getDemoData();engineInstance.setValue(value, () => {loading.value = false;});//监听渲染完成nextTick(()=>{setTimeout(() => {countPage()//计算的分页pluginList.value.forEach((item:inputItem,index:number)=>{const pluginDom=<HTMLInputElement>document.getElementById(item.domid)if(pluginDom){if(item.type=="input"){if(pluginDom.parentElement&&pluginDom.parentElement.parentElement)pluginDom.parentElement.parentElement.innerHTML=`<span style="width:${item.style.width}px;min-height: 26px;display: inline-block;border-bottom: 1px solid #d9d9d9;margin-bottom: -6px;"> ${item.value||'<span style="opacity:0;">-</span>'}</span>`}else if(item.type=="textarea"){if(pluginDom.parentElement)pluginDom.parentElement.innerHTML=item.value}else if(item.type=="checkbox"){let htmlstr=""if(item.value&&parseInt(item.value)==1){htmlstr=`<span style="width:${item.style.width}px;height:${item.style.height}px;position: relative;display: inline-block;vertical-align: text-bottom;border: 1px solid #000000;border-radius: 3px;" ><i style=" content: ''; width: ${item.style.height/2}px;height: ${item.style.height/3}px; border-left: 1px solid #000000; border-bottom: 1px solid #000000; position: absolute;  top: 3px;left: 3px;transform: rotate(-45deg);"></i></span>`}else{htmlstr=`<span style="width:${item.style.width}px;height:${item.style.height}px;position: relative;display: inline-block;vertical-align: text-bottom;border: 1px solid #000000;border-radius: 3px;" ></span>`}if(pluginDom.parentElement&&pluginDom.parentElement.parentElement)pluginDom.parentElement.parentElement.innerHTML=htmlstr}else if(item.type=="image"){if(pluginDom.parentElement)pluginDom.parentElement.innerHTML=`<img id="image_${item.uuid}" style="width:${item.style.width}px;margin-bottom: ${item.style.marginBottom}px;" src="https://tuwen.hulingyun.cn/common/uploadfile/getimage?url=resource/uploads/20230303/4c0fe297b181e4b509cedacf9918aa61.jpg"/>`}else if(item.type=="textsync"){//动态数据if(pluginDom.parentElement&&pluginDom.parentElement.parentElement)pluginDom.parentElement.parentElement.innerText=item.value}//事件if(item.type=="image"){//放大图片$(`#${item.domid}`).on("click",(event)=>{//  alert("放大图片")});} }});}, 500);})}});//打印预览const easyPrint = ref()const printFile=()=>{doPrint();// if(easyPrint.value)//  easyPrint.value.print()}const doPrint=()=>{// var head_str = "<html><head><title></title></head><body>"; //先生成头部// var foot_str = "</body></html>"; //生成尾部// var new_str = document.getElementsByClassName('form-widget-container')[0].innerHTML; //获取指定打印区域// document.body.innerHTML = head_str + new_str + foot_str; //构建新网页window.print(); //打印刚才新建的网页return false;}//分页//计算有多少页面const pageRaelheight=ref(1100)const pageCount=ref(1)//页面数const countPage=()=>{let editorheight=containerRef.value?.clientHeight||0editorheight=editorheight-40let pagenum=Math.ceil(editorheight/1100)if(pagenum>1){const midileheight=(pagenum-1)*25//中间分割线高之和const allheight=editorheight+midileheight//重新介绍高度pagenum=Math.ceil(allheight/(1100))pageRaelheight.value=pagenum*1100+midileheight}else{pageRaelheight.value=pagenum*1100}pageCount.value=pagenumnextTick(()=>{// 添加水印var watermark_txt = "<div>仅供GoFly专用 请注意保护隐私</div>" ;//水印内容WaterMark({ "watermarl_element": ".editor-bg-page", "watermark_txt": watermark_txt });})}return{winHeight,containerRef,engine,loading,printFile,easyPrint,//分页pageRaelheight,pageCount,}}});</script><style lang="scss" scoped>@import "./style/index.scss";</style>

less样式（样式布局很重要，这直接影响打印效果）如下：

.form-widget-container{background: transparent;overflow: auto;width: 100%;height: 100%;display: inline-flex;background: #f3f5f7;.savebtn{position:fixed;top: 60px;right: 120px;z-index: 99;}
}
//编辑器
.editor-container-box {width: 793.667px;margin: 0 auto;margin: 12px auto;.editor-content {overflow: hidden;position: relative;background: #fff;.editor-page-list{position: absolute;top: 0;z-index: 33;pointer-events: none;.editor-logic-page{width: 793.667px;height: 1100px;display: block;position: relative;.header-page{width: 100%;position: absolute;top: 0px;height: 100px;background: #fff;}.footer-page{width: 100%;position: absolute;bottom: 0px;height: 40px;background: #fff;overflow: hidden;.pagetext{text-align: center;padding-top: 10px;height: 100%;}}}.melo-page-gap {background: #f3f5f7;z-index:99999999;cursor: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='UTF-8'%3f%3e %3csvg width='24px' height='24px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e %3ctitle%3eICON/bottombar/paging%3c/title%3e %3cg id='ICON/bottombar/paging' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3e %3cg id='Word-%e5%ba%95%e9%83%a8%e6%a0%8f-%e5%88%86%e9%a1%b5'%3e %3cg id='Group%e5%a4%8d%e5%88%b6-3' opacity='0' fill='black' fill-rule='nonzero'%3e %3crect id='Rectangle' opacity='0.0599999987' x='0' y='0' width='24' height='24'%3e%3c/rect%3e %3crect id='Rectangle' opacity='0.100000001' x='3' y='3' width='18' height='18'%3e%3c/rect%3e %3crect id='Rectangle' opacity='0.119999997' x='4' y='4' width='16' height='16'%3e%3c/rect%3e %3c/g%3e %3cpath d='M6.25%2c14 L6.25%2c16 L6.25%2c17.75 L17.75%2c17.75 L17.75%2c16 L17.75%2c14 L19%2c14 L19%2c18.5 C19%2c18.7761424 18.7761424%2c19 18.5%2c19 L5.5%2c19 C5.22385763%2c19 5%2c18.7761424 5%2c18.5 L5%2c14 L6.25%2c14 Z' id='%e5%bd%a2%e7%8a%b6%e7%bb%93%e5%90%88%e5%a4%8d%e5%88%b6' fill='%23464D5A' transform='translate(12.000000%2c 16.500000) scale(-1%2c 1) rotate(-180.000000) translate(-12.000000%2c -16.500000) '%3e%3c/path%3e %3crect id='%e7%9f%a9%e5%bd%a2' fill='%23464D5A' x='3' y='11.25' width='18' height='1.25'%3e%3c/rect%3e %3cpath d='M6.25%2c5 L6.25%2c7 L6.25%2c8.75 L17.75%2c8.75 L17.75%2c7 L17.75%2c5 L19%2c5 L19%2c9.5 C19%2c9.77614237 18.7761424%2c10 18.5%2c10 L5.5%2c10 C5.22385763%2c10 5%2c9.77614237 5%2c9.5 L5%2c5 L6.25%2c5 Z' id='%e5%bd%a2%e7%8a%b6%e7%bb%93%e5%90%88' fill='%23464D5A'%3e%3c/path%3e %3c/g%3e %3c/g%3e %3c/svg%3e") 15 15,auto;}}.am-engine-view{position: absolute;top: 0;width: 793.667px;background: transparent;padding: 0px 40px 0px 40px;z-index: 19;}.am-engine{position: absolute;top: 0;width: 793.667px;background: transparent;padding: 0px 40px 0px 40px;z-index: 19;}//下一层 加水印.editor-pagebg-list{position: absolute;top: 0;z-index: 2;.editor-bg-page{width: 794px;height: 1120px;position: relative;overflow: hidden;background: transparent;pointer-events: none;}}}:deep(.data-table){background-color: transparent;max-width: 100%;}:deep(.data-table-reader .data-table tr td){border: 1px solid #000000;padding: 4px 4px;}//修改线颜色:deep(.table-wrapper .table-main-bg .table-main-border-top){border-top: 1px solid #000000;}:deep(.table-wrapper .table-main-bg .table-main-border-right){border-right: 1px solid #000000;}:deep(.table-wrapper .table-main-bg .table-main-border-bottom){border-bottom: 1px solid #000000;}:deep(.table-wrapper .table-main-bg .table-main-border-left){border-left: 1px solid #000000;}
}
@media print {@page{size:auto;margin: 0;width: 793.667px;height: 1100px;}.melo-page-gap{background: #fff;}.savebtn{display: none;}.editor-container-box{margin: 0px;}
}

4.实际效果如下：

总结

到此整个文档分页，自定义页眉页脚，文档打印的完整业务流程讲完了，希望看完让你也能直接写出腾讯文档一样的在线文档，如果您还有问题直接到Go.Fly全栈开发者社区找我讨论，作者也希望更多人分享出自己开发过程遇到难点项目，让更多人一起进步，助力新人成长。

vue+ts在线文档编辑(类腾讯文档)多人在线编辑-自定义页眉和分页打印（三）相关推荐

多人在线编辑文档开发_腾讯文档，支持多人实时在线协同编辑
多年前,在港资公司工作需要多人协同编辑文档,用的是VPN+Google Docs,很早就体验过多人在线协同办公的便利,那时候,APP.微信,甚至智能手机,都没普及. 现在,就算没有VPN,用不了Goo ...
云服务器怎么多人进去编辑文档,有道云协作怎么实现多人协同编辑多人同时处理文档方法...
有道云协作为用户提供了多人实时协同编辑功能,可以让协作群组中的多个用户在同一时间编辑同一份文档,互不干扰.下面,小编就为大家介绍一下这一功能,以前来了解一下吧! 类别:信息管理大小:68.25M ...
vue 打印功能调用原生print，带（去掉页眉页脚）分页打印
安装 vue-print-nb插件 npm install vue-print-nb --save 安装完成后在页面引入 import Print from 'vue-print-nb' </ ...
将vue页面文本导出到word,并设置页眉页脚，分页打印相关讲解--高级版
需求: 将以下内容导出到word,并设置页眉页脚,页码以及导出时间,且时间.页码加粗处理:每一个明细各占一页,且不能有空白页出现. 最终效果展示: 代码展示及讲解: <template>& ...
在线协作文档综合评测：金山文档、腾讯文档、石墨文档
在线协作文档综合评测 :Notion.FlowUs.Wolai.飞书.语雀.微软 Office.谷歌文档.金山文档.腾讯文档.石墨文档.Dropbox Paper.坚果云文档.百度网盘在线文档如今, ...
局域网内使用的多人协同编辑文档的软件哪个好？对比5款主流平台
支持局域网内多人协同编辑文档的软件或平台哪个好?PingCode .Confluence 等知识库工具和腾讯文档.飞书文档等都支持多人协作编辑,怎么选?这是企业团队在找文档管理工具最常见的问题. 支持 ...
腾讯文档在线表格修改工具栏大小
项目场景: 腾讯文档在线表格问题描述使用腾讯文档在线表格时发现工具栏太小,按住Ctrl+滑轮滚动只能放大缩小内容部分,工具栏大小并不改变. 解决方案: 点击浏览器(这里以Edge为例)右上角三个点 ...
十三种技术文档模板_竞品分析｜关于产品规划的思考：石墨文档 VS 腾讯文档 VS金山文档...
作者以在线协作文档行业领先的石墨文档.腾讯文档和金山文档为例进行了了竞品分析,通过对几款产品全方位的分析,总结了自己关于石墨文档产品规划的思考. 一.竞品概述 1. 竞品目的 2. 竞品目的通过对石 ...
使用腾讯文档收集快递信息
1在小程序中找到腾讯文档 2在腾讯文档中选择[新建]按钮 3选择[在线收集] 4选择空白收集表 5插入问题 6选择问题类型 7编辑问题 8发布编辑好的收集表格,也可以先预览看看效果 9生成二维码,发给 ...

vue+ts在线文档编辑(类腾讯文档)多人在线编辑-自定义页眉和分页打印（三）

前言