HTML实现A4模板

2024-05-24 01:26| 来源: 网络整理| 查看: 265

设置iframe，嵌入写好的模板

代码结构如下（show.vue）：

html部分您的浏览器不支持 iframe 标签。

通过样式变化来确定是否显示iframe（原本打算将iframe放在modal中，以此来控制显示，但是modal获取不到iframe的宽高，所以在控制高度方面不是很方便，因此使用原生的样式来写）,控制的css如下：

.template-wrapper-hidden { /*设置absolute使得 visibility:hidden时不占据空间*/ /* position: absolute; */ /* visibility: hidden; */ overflow: hidden; display: none; /*到最后发现还是这个最好使*/ } .template-wrapper-show { /*设置一个遮罩层，占满屏幕*/ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); /*让遮罩层位于屏幕的最上方*/ z-index: 1000; } .iframe-content { /*只为了能完全显示那个html界面*/ width: 260mm; height: 360mm; transform-origin: left top; overflow: hidden; }

实现缩放（实现难点）

在页面加载的时候，需要获取到屏幕的大小，从而按比例缩小模板大小以整个显示在屏幕上为了实现打印，模板的单位使用的是mm单位，而屏幕显示使用的是px单位，因此在计算时需要转换单位，计算的比例才有效最后决定缩放的大小需要进行判断，因为要适配各个屏幕的大小。实现 // 1. 获取屏幕大小，在页面加载时调用获取屏幕的方法 //获取DPI js_getDPI() { var arrDPI = new Array(); if (window.screen.deviceXDPI != undefined) { arrDPI[0] = window.screen.deviceXDPI; arrDPI[1] = window.screen.deviceYDPI; } else { var tmpNode = document.createElement("DIV"); tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden"; document.body.appendChild(tmpNode); arrDPI[0] = parseInt(tmpNode.offsetWidth); arrDPI[1] = parseInt(tmpNode.offsetHeight); tmpNode.parentNode.removeChild(tmpNode); } return arrDPI; }, //方法来源于网络，用的现成的 // 2. 转换单位 js_convertMm() { const dpiArray = this.js_getDPI(); let templateArray = []; //转换的原理可以百度一下， 260和360是设置的div宽高 let px = (260 * dpiArray[0]) / 25.4; let py = (360 * dpiArray[1]) / 25.4; templateArray[0] = px; templateArray[1] = py; return templateArray; }, // 3. 计算缩放比 populateIframeScale() { const winWidth = window.innerWidth - 50; const winHeight = window.innerHeight - 50; let templateSize = this.js_convertMm(); const widthScale = Number((winWidth / templateSize[0]).toFixed(2)); const heightScale = Number((winHeight / templateSize[1]).toFixed(2)); if ( (widthScale return heightScale; //如果计算得到的比例大于0.85，则按0.85的缩放比显示，因为预览的下面还有关闭按钮，需要预留一定的空间 } else if (widthScale > 0.85 && heightScale > 0.85) { return 0.85; } return 1; }, //使用计算属性将计算出的缩放比例运用到iframe的样式上 conputed(){ iframeStyle() { let scale = this.populateIframeScale(); return { transform: "scale(" + scale + ")" }; } }

【本文地址】

公司简介

联系我们