vue网页打印针式打印机内容显示不全

经测试针式打印机打印内容不全。选择打印模式A4，解决方法，给打印主题的宽度为60%，可以根据纸张大小进行调整百分比；

打印页脚文字设置，使用定位即可实现

代码如下：

<template><div><div style="width: 80%;position: fixed;bottom:35%;font-size: 12px;text-align: center;color: #f00;">{{bottomTitle}}，手写无效，仿冒必究。</div><div v-for="(item,index) in tableData" :key="index"><table style="width: 55%;" class="detail-tab"><tr style="color: #000;background-color: rgba(49, 114, 240, 0.6);"><td>采购企业</td><td colspan="4">{{item.purchase_company}}</td><td>联系人</td><td>{{item.contact_username}}</td></tr><tr class="darkblue"><td>配送地址</td><td colspan="4">{{item.purchase_address}}</td><td>联系电话</td><td>{{item.contact_phone}}</td></tr><!-- <tr class="defalutlblue"><td>配送时间</td><td>{{item.delivery_date}}</td><td></td><td></td><td></td><td>创建时间</td><td>{{item.update_date}}</td></tr> --><tr style="color: #000;background-color: rgba(49, 114, 240, 0.6);"><td width="">xxxx编码</td><td width="">xx</td><td width="">xx</td><td width="">xx</td><td width="">xx</td><td width="">xx</td><td width="">xx</td></tr><tr v-for="(items,index) in JSON.parse(item.products)" :key="index" :class="{darkblue:index%2==0}"><td>{{items.code}}</td><td>{{items.name}}</td><td>{{items.unit}}</td><td>{{items.num}}</td><td>{{items.price}}</td><td>{{items.total}}</td><td>{{items.xx}}</td></tr><tr style="background-color: rgba(49, 114, 240, 0.08);"><td>合计</td><td>商品数</td><td>{{item.number}}</td><td>金额</td><td colspan="2">{{item.cn_total}}</td><td>{{item.moneys}}</td></tr><tr><td>生产企业</td><td colspan="3">{{companyInfo.company_name}}</td><td>SC证号</td><td colspan="2">{{companyInfo.sc_code}}</td></tr><tr><td>地址</td><td colspan="3">{{companyInfo.address}}</td><td>电话</td><td colspan="2">{{companyInfo.contact_phone}}</td></tr><tr><td>备案号</td><td colspan="3">{{companyInfo.beian}}</td><td>配送时间</td><td colspan="2">{{item.delivery_date}}</td></tr></table><div style="height: 20px;"></div></div></div>
</template><script>export default {name: "print",props: {// 接受的打印数据tableData: {type: Array},companyInfo: {type: Object}},data() {return {qrcode: "",topTitle:localStorage.getItem("topTitle"),bottomTitle:localStorage.getItem("bottomTitle"),region:localStorage.getItem("region"),};},computed: {},created() {},mounted() {},methods: {}};
</script><style scoped>@page {size: auto A4 landscape;margin: 5mm;}* {padding: 0;margin: 0;list-style-type: none;font-family: "微软雅黑";font-size: 12px;}.tab_company_out {text-align: center;width: 100%;margin: auto;/* page-break-after: always; */page-break-after: auto;}.red {font-size: 18px;color: #f00;}.detail-tab {border: 1px #000 solid;margin-left: 60px;}.detail-tab tr td {border: 1px #000 solid;line-height: 22px;font-size: 12px;font-weight: normal;padding: 0;margin: 0;padding-left: 2px;}.table-up tr td {padding: 0;margin: 0;}.table-up {margin-left: 40px;}
</style>

vue网页打印针式打印机内容显示不全相关推荐

网页部分内容显示不全
一.bug描述下图为正常情况,一个网页主体宽度为1280px. 当缩小浏览器宽度,出现滚动条时,效果如下,右侧出现空白,导致内容显示不全. 二.bug重现和解决 1.代码如下 body中有一个灰色背 ...
word中图片为嵌入式格式时显示不全_打印Word图片显示不全 Word2007图片显示不全解决方法...
打印Word图片显示不全 Word2007图片显示不全解决方法,平凡的世界平凡的你,努力学习使我们变得不平凡,今天要介绍的知识是打印Word图片显示不全的相关知识,你准备好学习打印Word图片显示不全 ...
wps打印预览显示不全怎么解决？
我们在打印wps表格时,可能会遇到打印预览显示不全的情况,遇到这种情况要如何调整呢?下面就来看看具体的解决办法. 第一步:打开打印预览显示不全的wps表格,单击"打印预览"按钮. ...
html页面在ie上出现404怎么解决,ie浏览器网页上有错误显示不全的解决方法
ie浏览器网页上有错误显示不全的解决方法有时候打开网页发现内容的排版比较混乱,比如上下两行的文字部分重叠,字体大小看起来很不协调,本来是一行的文字显示成两行,等等.这是因为浏览器的设置出了问题,很多 ...
关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）
关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) 参考文章: (1)关于div的滚动条滚动到底部,内容显示不全的问题.(已解决) (2)https://www.cnblogs.com/th ...
html 横屏内容显示不全_为什么我的文本显示不全？
在实际工作中,经常会遇到文本显示不全的情况,比如表格里的文本显示不全等情况,你一般是怎么操作呢?本期与大家分享几种常见的原因. 1.Word表格文本显示不全如下图所示,表格里面的文本显示不全,这时该 ...
超简单调整Fedora25遇到的字体小问题——字体渲染问题和输入框内容显示不全...
第一个问题:字体渲染抗锯齿效果很不舒服.如图: 锯齿很明显.解决方法,使用gnome-tweak-tool(中文名:优化工具)如果没有,请安装: dnf install -y gnome-tweak ...
计算机word文档无法预览,电脑打开Word文档内容显示不全或显示空白怎么解决
很多用户会在电脑中使用必装的Microsoft Office系列软件.有用户在电脑中打开Word文档,发现内容显示不全,有时候显示空白,那么应该怎么解决这一问题?对此,大家可以参考本教程提供的方法. ...
echarty轴自定义显示不全,ECharts图表X轴或者Y轴单位内容显示不全
现在出现的问题是X轴单位内容显示不全主要代码如下:xAxis中的name为"时长(min)",但上图只显示了"时" grid: { left: '3%', r ...

vue网页打印针式打印机内容显示不全

经测试针式打印机打印内容不全。选择打印模式A4，解决方法，给打印主题的宽度为60%，可以根据纸张大小进行调整百分比；

打印页脚文字设置，使用定位即可实现

代码如下：

vue网页打印针式打印机内容显示不全相关推荐

最新文章

热门文章