word文档PDF文档在线签章签名功能源码

---

前言

提示：通过WEB网站后端实现word文档 pdf文档在线签名盖章能，可作为需要实现此功能的人员参考、学习。不足之处请谅解，本代码不可作为商业用途，不保证源码安全性。

---

提示：先上传最终下效果

一、css样式

css样式基于Layui，本页面用到的样式有限，可自行参考Layui官方组件进行调整设置。
引入样式

<link rel="stylesheet" href="layui.css">

HTML页面

<div class="layui-body">
	<div class="layui-tab layui-tab-brief" lay-filter="tab">
		<blockquote class="layui-elem-quote" style="margin-top: 5px;">
           签章页面
		</blockquote>

        <div class="layui-row" id="app">
            <div class="layui-col-xs8 elesign center" style="width:auto">
                <div class="page">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="view-fullscreen">全屏</button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" id="cancel-fullscreen">退出全屏</button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" @click="prevPage">上一页</button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" @click="nextPage">下一页</button>
                    <button class="layui-btn layui-btn-sm layui-btn-normal" >1/3页</button>
                    
                </div>
                <canvas id="the-canvas"/>
            </div>
            <canvas id="ele-canvas"></canvas>
            <div class="layui-col-xs2" style="margin-left: 20px;background-color: rgb(242 242 242)">                
                <div class="right-item">
                    <span class="right-item-title">标题</span>
                    <span class="detail-item-desc"> 测试</span>
                </div>
                <div class="right-item">
                    <span class="right-item-title">申请人</span>
                    <span class="detail-item-desc">张三</span>
                </div>				
                <div class="right-item">
                    <span class="right-item-title">申请时间</span>
                    <span class="detail-item-desc">2022-05-05 09:29:53</span>
                </div>
                <div class="right-item">
                    <span class="right-item-title">审核人</span>
                    <span class="detail-item-desc">财务</span>
                </div>                
            </div>
            <{if condition="$vo.status neq 4"}>
            <div class="layui-col-xs2" style="width: 183px;line-height: 58px;">
                <div class="ele-control">
                    <button class="layui-btn layui-btn-lg layui-btn-danger" style="margin-left: 10px;" @click="remove">
                        <i class="layui-icon layui-icon-delete"></i>删除签章
                    </button >
                    
                    <button class="layui-btn layui-btn-lg layui-btn-normal" @click="submit">
                        <i class="layui-icon layui-icon-edit"></i>提交签章
                    </button>
                    
                </div>
            </div>

        </div>

	</div>
</div>

二、JS引用

<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="pdf.js"></script>
<script type="text/javascript" src="pdf.worker.js"></script>
<script type="text/javascript" src="fabric.js"></script>
<script type="text/javascript" src="axios.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>

有必要介绍一下pdfjs（pdfjs-dist） 和 fabric 2个JS作用

2.1 Pdfjs-dist 主要作用主要加载预览pdf文档

参考文档如下：

https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/index.html

pdf.js 的对象结构大致遵循实际 PDF 的结构。在顶层有一个文档对象。从文档中，可以获取更多信息和单独的页面。获取文档:

pdfjsLib.getDocument('helloworld.pdf')

请记住，虽然 pdf.js 使用 Promises ，并且上面将返回一个 PDFDocumentLoadingTask 实例，该实例具有 promise 属性，该属性是通过 Document 对象解析的。

var loadingTask = pdfjsLib.getDocument('helloworld.pdf');
loadingTask.promise.then(function(pdf) {
  // you can now use *pdf* here
});

每个 PDF 页面都有自己的视口，视口定义了以像素（72dpi）和初始旋转为单位的大小。默认情况下，视口被缩放到 PDF 的原始大小，但这可以通过修改视口来更改。创建视口时，还将创建一个初始转换矩阵，该矩阵将考虑所需的比例、旋转，并转换坐标系（PDF 文档中的 0,0 点在左下方，而 Canvas0,0 在左上方）

var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
// Support HiDPI-screens.
var outputScale = window.devicePixelRatio || 1;

var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');

canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height =  Math.floor(viewport.height) + "px";

var transform = outputScale !== 1
  ? [outputScale, 0, 0, outputScale, 0, 0]
  : null;

var renderContext = {
  canvasContext: context,
  transform: transform,
  viewport: viewport
};
page.render(renderContext);

2.2 Fabric库实现签名图章

参考文档

https://www.fabricmc.net/
可在线调试
http://fabricjs.com/custom-control-render

Fabric.js 是一个在服务器端运行的 Node.js 扩展模块，用于在 Web 上绘制各种图形的 JS 库。

三、Word转PDF

由于上传的word文档并不能实现直接预览签章效果，所有在上传文档的时候 程序进行了格式自动转换，把docx或doc 格式进行转换为pdf格式
用的插件是 softoffice 支持win系统和 linux系统 自行查询安装

二、PHP后端处理

1.引用Soffice命令

主要处理上传文档的转换并返回给前端，保存到数据库（mysql）：转换命令如下：

LANG=en_US.UTF-8 soffice --headless --convert-to  源文件 --outdir 输出目录

最终效果

gitee地址：

https://gitee.com/yishengsj/Fabric-pdfjs
仓库地址：https://gitee.com/yishengsj/cbcms