使用浏览器自带的window.print()方法打印或保存成pdf文件

最新推荐文章于 2025-02-18 22:19:31 发布
lixu102593
最新推荐文章于 2025-02-18 22:19:31 发布
阅读量1.1k
点赞数 1
文章标签： pdf javascript 前端
本文链接：https://blog.youkuaiyun.com/lixu102593/article/details/138196307
版权
<head>
	<title>上传word文件</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		.container {
			padding: 0 50px;
		}

		.operation {
			padding: 20px;
		}

		.btn {
			min-width: 50px;
			font-size: 20px;
			color: #fff;
			background: #118ee9;
			margin: 0 20px 0 0;
			padding: 8px;
			border: none;
			border-radius: 4px;
			box-sizing: border-box;
		}

		.item {
			width: 350px;
			box-sizing: border-box;
			padding: 4px 14px 4px 14px;
			color: #000;
			font-size: 12px;
			background: #fff;
		}

		#myHeader {
			display: none;
		}

		#myFooter {
			display: none;
		}

		@media print {
			@page {
				/* header: myHeader; */
				/* 页眉区域的ID */
				/* footer: myFooter; */
				/* 页脚区域的ID */
				/* 去掉页眉页脚*/
				/* margin-top: 10px;
				margin-bottom: 10px; */
			}


			table {
				/* 如果可能，表不会跨页拆分。 */
				/* page-break-inside: avoid; */
			}

			body {
				margin: 10px;
			}

			/* 页眉页脚的样式 */
			/* #myHeader {
				display: block;
				position: fixed;
				top: 0;
				width: 100%;
				text-align: center;
				border-bottom: 1px solid #ccc;
			}

			#myFooter {
				display: block;
				position: fixed;
				bottom: 0px;
				width: 100%;
				text-align: center;
				border-top: 1px solid #ccc;
			} */
		}
	</style>

	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/mammoth/1.6.0/mammoth.browser.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/docx-preview@0.1.15/dist/docx-preview.js"></script>
	<style>
		section.docx {
			padding: 0 !important;
		}

		.docx table {
			margin-left: 0 !important;
			width: 100% !important;
		}

		/*  默认情况下，元素的背景色不会被打印，可通过设置属性来支持：*/
		div {
			-webkit-print-color-adjust: exact;
			print-color-adjust: exact;
			color-adjust: exact;
		}
	</style>
</head>

<body>
	<div class="container" id="app">

		<!-- <div id="myHeader">这是页眉内容</div> -->
		<!-- 页面内容 -->
		<!-- <div id="myFooter">这是页脚内容</div> -->
		<div class="operation">
			<button class="btn" @click="uploadFile">上传word文件</button>
			<button class="btn" @click="preview">打印</button>
		</div>
		<br>
		<br>
		<!--startprint-->
		<div style="background-color: aqua;">
			<span v-for="i in 1000">{{i}}|||</span>
		</div>
		<img src="https://bucket-genwozhong.oss-cn-beijing.aliyuncs.com/mini/tudou_pc.png" class="ggg" />
		<div id="preview"></div>


		<!--endprint-->
	</div>
	<script>
		const {
			createApp,
			ref,
			onMounted
		} = Vue
		createApp({
			setup() {


				const preview = () => {
					// bdhtml = window.document.body.innerHTML; //获取当前页的html代码
					PageSetup_Null(); //把页眉页脚设置为空
					// sprnstr = "<!--startprint-->"; //设置打印开始区域
					// eprnstr = "<!--endprint-->"; //设置打印结束区域
					// prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); //从开始代码向后取html
					// prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); //从结束代码向前取html
					// window.document.body.innerHTML = prnhtml;
					window.print();
					// window.document.body.innerHTML = bdhtml;
				};
				const PageSetup_Null = () => {

					var HKEY_Root, HKEY_Path, HKEY_Key;

					HKEY_Root = "HKEY_CURRENT_USER";

					HKEY_Path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";

					try {

						var Wsh = new ActiveXObject("WScript.Shell");

						HKEY_Key = "header";

						Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");

						HKEY_Key = "footer";

						Wsh.RegWrite(HKEY_Root + HKEY_Path + HKEY_Key, "");

					} catch (e) {
						console.log(e, '在风沙韩国')
					}

				}
				let wordData = ref('')
				const uploadFile = (mark) => {
					let inputEle = document.createElement('input')
					inputEle.type = 'file'
					inputEle.accept =
						'.doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document'
					inputEle.click()
					inputEle.addEventListener('input', (event) => {
						onWord(event)
					})
				};
				const onWord = (event, type) => {
					let reader = new FileReader(),
						file;
					if (type == 1) {
						file = event;
					} else {
						file = event.target.files[0];
					}
					let options = {
						inWrapper: false,
						ignoreWidth: true,
						ignoreHeight: true
					}
					console.log(file, '欧系是司法的价格和')
					docx.renderAsync(file, document.getElementById("preview"), null, options)
					let fileName = file.name
					if (file) {
						reader.onload = function(e) {
							const data = e.target.result;
							// 转文字
							mammoth.extractRawText({
								arrayBuffer: data
							}).then(function(displayResult) {
								wordData.value = displayResult.value
							}).done();
							// 转HTML
							mammoth.convertToHtml({
								arrayBuffer: data
							}).then(function(displayResult) {
								console.log(displayResult);
							}).done();
							// 转Markdown 文档。
							mammoth.convertToMarkdown({
								arrayBuffer: data
							}).then(function(displayResult) {
								console.log(displayResult);
							}).done();
						};
						reader.readAsArrayBuffer(file);
					}
				}
				const url =
					'http://8.140.113.96:9015/Files/Files/ATTACHMENTPATH/2024-04-18/%E8%B4%A2%E5%8A%A1%E7%B3%BB%E7%BB%9F%E4%BF%AE%E6%94%B9%E9%9C%80%E6%B1%82%E8%B4%A2%E5%8A%A1%E8%B4%A6%E7%B0%BF0415.docx';
				// 获取图片和world文件的内容
				const getImageAndWorldContent = async () => {
					const response = await fetch(url);
					const blob = await response.blob();
					const file = new File([blob], 'file.docx', {
						type: blob.type
					});
					onWord(file, 1)
					console.log(response, '写采购商地方')
					console.log(blob, '写采购商地方')
					console.log(file, '写采购商地方')
				}


				onMounted(async () => {
					getImageAndWorldContent()
				})

				return {
					wordData,
					uploadFile,
					onWord,
					preview,
				}
			}
		}).mount('#app')
	</script>
</body>