富文本内容展示A4纸张大小的内容，生成一个pdf的格式预览，预览内容上加两张图片，图片可拖拽，可下载到本地pdf

<template>
	<div class="container">
	  <!-- A4容器（带滚动） -->
	  <div class="a4-container" ref="a4Container">
		<!-- A4纸张（图片的定位父级） -->
		<div class="a4-paper" ref="a4Paper">
		  <div class="rich-content" v-html="richText"></div>
		  <!-- 第一张可拖拽图片 -->
		  <img
			id="dragImg1"
			class="float-img"
			src="https://你得图片地址694bb8e4e69da.png"
			style="position: absolute; width: 80px; height: 80px; cursor: move;"
		  />
		  <!-- 第二张可拖拽图片 -->
		  <img
			id="dragImg2"
			class="float-img"
			src="https://你的图片地址.png"
			style="position: absolute; width: 80px; height: 80px; cursor: move;"
		  />
		</div>
	  </div>
  
	  <!-- 操作按钮 -->
	  <div class="btn-group">
		<!-- <button class="print-btn" @click="handlePrint">打印</button> -->
		<button class="download-btn" @click="downloadPDF">下载PDF</button>
	  </div>
	</div>
  </template>
  
  <script>
  export default {
	name: "TwoDragImgToPDF",
	data() {
	  return {
	  //富文本内容
		richText: `<div class=\"Section0\">\n<p class=\"MsoNormal\" align=\"center\"><span style=\"font-family: 宋体;\">建筑工人简易劳动合同</span></p>\n<p class=\"MsoNormal\" align=\"center\"><span style=\"font-family: 宋体;\">（示范文本）</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">用人单位名称：</span><u>&nbsp; company_name&nbsp; &nbsp;</u><span style=\"font-family: 宋体;\">（以下简称甲方）</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">统一社会信用代码：company_tax_number</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">法定代表人或负责人：company_legal</span></p>\n<div>\n<pre><span style=\"font-family: 宋体;\">电话：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> company_tel</u><u> </u><u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</u><u> </u><u> </u></pre>\n</div>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">住所：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u>&nbsp; company_address&nbsp;&nbsp;</u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">联系地址：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u>&nbsp;company_address &nbsp;&nbsp;</u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">劳动者姓名：</span><u>&nbsp; &nbsp;user_name&nbsp; &nbsp;</u><span style=\"font-family: 宋体;\">（以下简称乙方）</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">性别：</span><u>&nbsp; user_sex&nbsp; </u><span style=\"font-family: 宋体;\">身份证号码：user_id_card</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">电话：user_phone</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">联系地址：</span><u> </u><u> </u><u> </u><u>&nbsp;&nbsp;&nbsp;&nbsp;</u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">劳动者紧急联系人信息</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">姓名：</span><u>&nbsp; &nbsp; &nbsp; &nbsp;</u><span style=\"font-family: 宋体;\">电话：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">联系地址：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u>&nbsp;&nbsp;&nbsp;&nbsp;</u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">与劳动者关系：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">根据《中华人民共和国劳动法》《中华人民共和国劳动合同法》《中华人民共和国建筑法》《中华人民共和国劳动合同法实施条例》《保障农民工工资支付条例》等有关法律法规，甲乙双方经平等自愿、协商一致订立本合同。</span></p>\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第一条</span> <span style=\"font-family: 宋体;\">劳动合同的类别、期限、试用期</span></strong></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">甲乙双方约定按以下第＿种方式确定劳动合同期限：</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">1.1以完成一定工作任务为期限：自</span>___<span style=\"font-family: 宋体;\">年＿</span><span style=\"font-family: 宋体;\">_</span>_<span style=\"font-family: 宋体;\">月＿</span>_<span style=\"font-family: 宋体;\">日起至</span> ______________<span style=\"font-family: 宋体;\">工作完成之日止。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">1.2固定期限：合同期限自＿年＿月＿日起至</span><u><span style=\"font-family: 宋体;\">＿</span></u><span style=\"font-family: 宋体;\">年＿月＿日止；乙方的试用期从＿</span><span style=\"font-family: 宋体;\">_</span>_<span style=\"font-family: 宋体;\">年</span><span style=\"font-family: 宋体;\">_</span>__<span style=\"font-family: 宋体;\">月＿</span><span style=\"font-family: 宋体;\">_日至＿年＿月＿日。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">1.3无固定期限：自＿年＿月_</span>_<span style=\"font-family: 宋体;\">日起至依法解除、终止合同时止，乙方的试用期为</span><span style=\"font-family: 宋体;\">_</span>______<span style=\"font-family: 宋体;\">个月。</span></p>\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第二条</span> <span style=\"font-family: 宋体;\">工作岗位、工作地点、工作内容和工作时间</span></strong></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">2.1工作岗位（工种）：</span><u> </u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">2.2工作地点：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">2.3工作内容：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">经双方协商一致后，甲方可对乙方的工作岗位、工作地点、工作内容进行调整，双方应书面变更劳动合同，变更内容作为本合同附件。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">2.4选择本合同第1.1款的，工作完成标准为：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">2.5工作时间：甲方应依照法律法规规定，合理安排工作时间，保证乙方每周至少休息一天。根据生产经营需要和乙方岗位实际情况，甲方可根据春节、农忙、天气等情况，在保障乙方劳动安全和身体健康前提下，经依法协商，合理安排乙方工作时间和休息时间。实行特殊工时制度的，应经人力资源社会保障部门审批后执行。</span></p>\n</div>\n<p>&nbsp;</p>\n<div class=\"Section1\">\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第三条</span> <span style=\"font-family: 宋体;\">工资和支付方式</span></strong></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">3.1乙方工资由基本工资和绩效工资组成。甲方应通过施工总承包单位设立的农民工工资专用账户，将工资直接发放给乙方。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">3.2基本工资：根据甲方的工资分配制度与乙方的工作岗位情况，甲乙双方确定乙方基本工资按以下第＿_</span>__<span style=\"font-family: 宋体;\">项执行，甲方每月＿</span><span style=\"font-family: 宋体;\">_</span>___<span style=\"font-family: 宋体;\">日前足额支付：</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">（</span><span style=\"font-family: 宋体;\">1）月基本工资</span><u><span style=\"font-family: 宋体;\">：</span></u><u> </u><u> </u><span style=\"font-family: 宋体;\">元，不足一个月的，以乙方月工资除以</span><span style=\"font-family: 宋体;\">21.75天得出的日工资为基数，乘以乙方实际工作天数计算；</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">（</span><span style=\"font-family: 宋体;\">2）日基本工资：</span>_________<span style=\"font-family: 宋体;\">元；</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">（</span><span style=\"font-family: 宋体;\">3）计件基本工资：</span><u> </u><u> </u><span style=\"font-family: 宋体;\">元（每平方米、立方米、米、吨、件、套</span><span style=\"font-family: 宋体;\">......）。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">3.3绩效工资：</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">3.3.1签订本合同时，在乙方对甲方安排其工作岗位的各项工作内容已有充分了解的前提下，甲方对乙方的工作按照以下标准进行考核，并按月支付乙方的绩效工资：</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">（</span><span style=\"font-family: 宋体;\">1）乙方完成甲方安排各项工作的质量效率情况；</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">（</span><span style=\"font-family: 宋体;\">2）乙方遵守甲方制定的各项安全管理规定情况；</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">（</span><span style=\"font-family: 宋体;\">3）乙方专业作业能力等级；</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">（</span><span style=\"font-family: 宋体;\">4）其他，请注明：</span><u> </u><u> </u><u> </u><u> </u><u> </u><u> </u></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">3.3.2绩效工资的计算方法和支付方式由甲乙双方根据工作岗位的要求另行约定，作为本合同附件。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">3.4乙方在试用期期间的工资为每月（日、件）</span><u> </u><u> </u><u> </u><span style=\"font-family: 宋体;\">元。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">3.5在本合同有效期内，双方对劳动报酬重新约定的，应当采用书面方式并作为本合同的附件。</span></p>\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第四条</span> <span style=\"font-family: 宋体;\">甲方的权利和义务</span></strong></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">4.1甲方有权依照法律法规和本单位依法制定的相关规章制度，对乙方实施管理，甲方应将相关规章制度告知乙方。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">4.2甲方应为乙方提供符合规定的劳动防护用品和其他劳动条件，办理好各项手续，并按照国家建筑施工安全生产的规定，在施工现场采取必要的安全措施，为乙方创造安全工作环境。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">4.3甲方应按照有关法律法规规定对女职工进行劳动保护，不得要求女职工从事法律法规禁止其从事的劳动。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">4.4甲方应按国家和当地政府的有关规定，对乙方因工负伤或患职业病给予相应待遇。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">4.5甲方应按照规定为乙方创造岗位培训的条件，对乙方进行安全生产、职业技能、遵纪守法、道德文明等方面的教育。乙方参加甲方安排的培训活动视同出勤，甲方不得扣减乙方工资。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">4.6</span><span style=\"font-family: 宋体;\">乙方已在户籍地参保城乡居民保险或新型农村合作医疗保险，自愿放弃城镇职工社会保险，甲方应为乙方缴纳部分已折算在乙方工资当中</span><span style=\"font-family: 宋体;\">。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">4.7甲方应对乙方的出勤、工作效率等情况做好记录，作为计算乙方工资的依据。</span></p>\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第五条</span> <span style=\"font-family: 宋体;\">乙方的权利和义务</span></strong></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">5.1乙方应具备本合同工作岗位要求的技能，符合有关部门和甲方对工作岗位的要求，乙方应如实向甲方告知年龄、身体健康状况等可能影响从事本合同工作的情况。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">5.2乙方与甲方签订本合同时，如与其他单位存在劳动关系的应如实告知甲方，否则甲方有权依法解除合同。</span></p>\n</div>\n<p>&nbsp;</p>\n<div class=\"Section2\">\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">5.3乙方应自觉遵守有关法律法规和甲方依法制定的规章制度，严格遵守安全操作规程，服从甲方的管理，按实名制管理要求考勤，按时完成规定的工作数量，达到规定的质量标准。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">5.4乙方应积极参加甲方安排的安全、技能等岗位培训活动，不断提高工作技能。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">5.5乙方对甲方管理人员违章指挥、强令冒险作业的要求有权拒绝，乙方对危害生命安全和身体健康的劳动条件，有权要求甲方改正或停止工作，并有权向有关部门检举和投诉。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">5.6乙方患病或非因工负伤的医疗待遇按国家有关规定执行。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">5.7乙方依法享有休息休假等各项劳动权益。</span></p>\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第六条</span> <span style=\"font-family: 宋体;\">劳动纪律</span></strong></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">6.1乙方应遵守职业道德，遵守劳动安全卫生、生产工艺、工作规范和实名制管理等方面的要求，爱护甲方的财产。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">6.2乙方违反劳动纪律，甲方可根据本单位依法制定的规章制度，给予相应处理，直至依法解除本合同。</span></p>\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第七条</span> <span style=\"font-family: 宋体;\">劳动合同的解除和终止</span></strong></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">7.1终止本合同，应当符合法律法规的相关规定。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">7.2甲乙双方协商一致，可解除本合同。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">7.3合同解除或终止前，甲方应结清乙方的工资。</span></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">7.4任何一方单方解除本合同，应符合法律法规相关规定，并应提前通知对方。符合经济补偿条件的，甲方应按规定向乙方支付经济补偿。在甲方危及乙方人身自由和人身安全的情况下，乙方有权立即解除劳动合同。</span></p>\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第八条</span> <span style=\"font-family: 宋体;\">劳动争议处理</span></strong></p>\n<p class=\"MsoNormal\"><span style=\"font-family: 宋体;\">甲乙双方因本合同发生劳动争议时，可按照法律法规的规定，进行协商、申请调解或仲裁。不愿协商或者协商不成的，可向劳动人事争议仲裁委员会申请仲裁。对仲裁裁决不服的，可依法向有管辖权的人民法院提起诉讼。</span></p>\n<p class=\"MsoNormal\"><strong><span style=\"font-family: 宋体;\">第九条</span> <span style=\"font-family: 宋体;\">其他</span></strong></p>\n<p class=\"MsoNormal\">9.1甲乙双方可根据实际情况约定的其他事项如下：</p>`,
		// 管理两张图片的状态
		imgList: [
		  { id: "dragImg1", dom: null, isDragging: false, offsetX: 0, offsetY: 0, x: 100, y: 100 },
		  { id: "dragImg2", dom: null, isDragging: false, offsetX: 0, offsetY: 0, x: 200, y: 100 }
		]
	  };
	},
	mounted() {
	  // 初始化所有图片
	  this.imgList.forEach(img => {
		img.dom = document.getElementById(img.id);
		// 设置初始位置
		this.setImgPos(img, img.x, img.y);
		// 绑定拖拽事件
		this.bindDragEvent(img);
	  });
	  // 等待CDN库加载
	  this.$nextTick(() => {
		window.jsPDF = window.jspdf.jsPDF;
	  });
	},
	methods: {
	  // 通用：设置图片位置
	  setImgPos(img, x, y) {
		img.dom.style.left = x + "px";
		img.dom.style.top = y + "px";
		img.x = x;
		img.y = y;
	  },
  
	  // 通用：绑定单张图片的拖拽事件
	  bindDragEvent(img) {
		// 拖拽开始
		img.dom.addEventListener("mousedown", (e) => {
		  e.preventDefault();
		  e.stopPropagation();
		  // 重置所有图片的拖拽状态，确保仅当前图片可拖拽
		  this.imgList.forEach(item => item.isDragging = false);
		  img.isDragging = true;
  
		  // 计算鼠标相对图片的偏移（基于A4纸坐标）
		  const imgRect = img.dom.getBoundingClientRect();
		  const a4Rect = this.$refs.a4Paper.getBoundingClientRect();
		  img.offsetX = e.clientX - (a4Rect.left + img.x);
		  img.offsetY = e.clientY - (a4Rect.top + img.y);
  
		  // 绑定全局移动/结束事件（使用箭头函数确保this指向）
		  const onMouseMove = (e) => this.onDragMove(e, img);
		  const onMouseUp = () => this.onDragEnd(img, onMouseMove, onMouseUp);
		  
		  document.addEventListener("mousemove", onMouseMove);
		  document.addEventListener("mouseup", onMouseUp);
		  document.addEventListener("mouseleave", onMouseUp);
  
		  // 移动端兼容
		  img.dom.addEventListener("touchstart", (e) => {
			e.preventDefault();
			const touch = e.touches[0];
			this.imgList.forEach(item => item.isDragging = false);
			img.isDragging = true;
  
			const imgRect = img.dom.getBoundingClientRect();
			const a4Rect = this.$refs.a4Paper.getBoundingClientRect();
			img.offsetX = touch.clientX - (a4Rect.left + img.x);
			img.offsetY = touch.clientY - (a4Rect.top + img.y);
  
			const onTouchMove = (e) => this.onTouchDragMove(e, img);
			const onTouchEnd = () => this.onDragEnd(img, onTouchMove, onTouchEnd);
			
			document.addEventListener("touchmove", onTouchMove, { passive: false });
			document.addEventListener("touchend", onTouchEnd);
		  });
		});
	  },
  
	  // PC端拖拽中（通用）
	  onDragMove(e, img) {
		if (!img.isDragging) return;
		e.preventDefault();
  
		const a4Rect = this.$refs.a4Paper.getBoundingClientRect();
		// 计算相对A4纸的新坐标
		let newX = e.clientX - a4Rect.left - img.offsetX;
		let newY = e.clientY - a4Rect.top - img.offsetY;
  
		// 限制在A4纸内
		const imgWidth = 80;
		const imgHeight = 80;
		newX = Math.max(0, Math.min(newX, a4Rect.width - imgWidth));
		newY = Math.max(0, Math.min(newY, this.$refs.a4Paper.offsetHeight - imgHeight));
  
		// 更新位置
		this.setImgPos(img, newX, newY);
	  },
  
	  // 移动端拖拽中（通用）
	  onTouchDragMove(e, img) {
		if (!img.isDragging) return;
		e.preventDefault();
		const touch = e.touches[0];
  
		const a4Rect = this.$refs.a4Paper.getBoundingClientRect();
		let newX = touch.clientX - a4Rect.left - img.offsetX;
		let newY = touch.clientY - a4Rect.top - img.offsetY;
  
		const imgWidth = 80;
		const imgHeight = 80;
		newX = Math.max(0, Math.min(newX, a4Rect.width - imgWidth));
		newY = Math.max(0, Math.min(newY, this.$refs.a4Paper.offsetHeight - imgHeight));
  
		this.setImgPos(img, newX, newY);
	  },
  
	  // 拖拽结束（通用）
	  onDragEnd(img, moveEvent, upEvent) {
		img.isDragging = false;
		document.removeEventListener("mousemove", moveEvent);
		document.removeEventListener("mouseup", upEvent);
		document.removeEventListener("mouseleave", upEvent);
		document.removeEventListener("touchmove", moveEvent);
		document.removeEventListener("touchend", upEvent);
	  },
  
	  // 打印
	  handlePrint() {
		window.print();
	  },
  
	  // 下载PDF
	  async downloadPDF() {
		try {
		  const a4Dom = this.$refs.a4Paper;
		  this.$refs.a4Container.style.overflow = "hidden";
  
		  // DOM转canvas（支持多图片渲染）
		  const canvas = await html2canvas(a4Dom, {
			scale: 2,
			useCORS: true,
			backgroundColor: "#ffffff",
			width: a4Dom.offsetWidth,
			height: a4Dom.offsetHeight
		  });
  
		  // 初始化A4 PDF
		  const pdf = new window.jsPDF({
			orientation: "portrait",
			unit: "mm",
			format: "a4"
		  });
  
		  // canvas转图片并添加到PDF
		  const imgData = canvas.toDataURL("image/jpeg", 1.0);
		  const imgWidth = 210;
		  const imgHeight = (canvas.height * imgWidth) / canvas.width;
		  pdf.addImage(imgData, "JPEG", 0, 0, imgWidth, imgHeight);
  
		  // 长文本自动分页
		  if (imgHeight > 297) {
			const pageNum = Math.ceil(imgHeight / 297);
			for (let i = 1; i < pageNum; i++) {
			  pdf.addPage();
			  pdf.addImage(imgData, "JPEG", 0, - (i * 297), imgWidth, imgHeight);
			}
		  }
  
		  // 下载PDF
		  pdf.save("建筑工人劳动合同.pdf");
		  this.$refs.a4Container.style.overflow = "auto";
		} catch (error) {
		  console.error("PDF下载失败：", error);
		  alert("PDF下载失败，请重试！");
		  this.$refs.a4Container.style.overflow = "auto";
		}
	  }
	}
  };
  </script>
  
  <style scoped>
  .container {
	width: 100%;
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20px 0;
	box-sizing: border-box;
  }
  
  .a4-container {
	width: 834px;
	height: 80vh;
	margin: 0 auto;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid #eee;
  }
  
  .a4-paper {
	width: 794px;
	min-height: 1123px;
	margin: 0 auto;
	padding: 20px;
	box-sizing: border-box;
	background: #fff;
	position: relative !important;
	page-break-inside: avoid;
	margin-bottom: 20px;
	box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
  
  .rich-content {
	font-family: 宋体, SimSun, sans-serif;
	font-size: 16px;
	line-height: 1.8;
  }
  .rich-content p {
	margin: 8px 0;
	page-break-inside: avoid;
  }
  
  .btn-group {
	display: flex;
	width: 794px;
	margin: 20px auto 0;
	gap: 20px;
  }
  .print-btn, .download-btn {
	flex: 1;
	height: 48px;
	line-height: 48px;
	background: #409eff;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer;
  }
  .download-btn {
	background: #67c23a;
  }
  .print-btn:hover {
	background: #66b1ff;
  }
  .download-btn:hover {
	background: #85ce61;
  }
  
  /* 穿透scoped，控制所有拖拽图片 */
  ::v-deep .float-img {
	-webkit-user-drag: none !important;
	touch-action: none !important;
	pointer-events: auto !important;
	position: absolute !important;
	/* 区分两张图片的边框样式（可选） */
  }
  /* 可选：给第二张图片不同的边框颜色，便于区分 */
  ::v-deep #dragImg2 {
	border-color: #67c23a !important;
  }
  
  @media print {
	.a4-container {
	  overflow: visible;
	  height: auto;
	}
	.a4-paper {
	  width: 210mm;
	  height: 297mm;
	  margin: 0 auto 20px;
	  page-break-after: always;
	  box-shadow: none;
	}
	.btn-group {
	  display: none;
	}
	@page {
	  size: A4;
	  margin: 0;
	}
  }
  </style>

效果预览

下载的内容