web打印内容 可自动适配

最新推荐文章于 2024-03-26 11:52:01 发布
最新推荐文章于 2024-03-26 11:52:01 发布
阅读量738 收藏 1
点赞数
文章标签： 前端 javascript firefox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61828394/article/details/130626925
版权

#第一步安装插件

npm install print-js --save
//查看是否安装成功 package.json文件中查看print-js依赖。
 "dependencies": {
    "axios": "^0.19.2",
    "babel-polyfill": "^6.26.0",
    "element-ui": "^2.15.6",
    "file-saver": "^2.0.5",
    "pinyin-match": "^1.2.2",
    "print-js": "^1.6.0",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.2",
    "xlsx": "^0.17.0",
    "xlsx-style": "^0.8.13"
  },

#第二步 在要打印的页面引入依赖

  import printJS from 'print-js'

#第三步 写好页面要打印的内容 以id print为打印内容

  <div class="data-card" id="print">
        <el-table size="mini" :key="num" id="mytable"
                  ref="table"
                  :data="tableDataDetail"
                  border
                  style="width: 100%">
          <el-table-column
            align="center"
            :label="title">
          </el-table-column>
        </el-table>
      </div>

#打印事件及方法

 <el-button type="primary" @click="handlePrint">打印</el-button>

    // body{zoom:80%;}   如果需要缩放把这个放入style中
        handlePrint() {
            let userAgent = navigator.userAgent;
            //判断是否Firefox浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                console.log('Firefox')
                printJS({
                    printable: 'mytable1', // 标签元素id
                    type: 'html',
                    header: '',
                    style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
                });
            }
            //判断是否chorme浏览器
            if (userAgent.indexOf("Chrome") > -1) {
                console.log('Chrome')
                printJS({
                    printable: 'mytable1', // 标签元素id
                    type: 'html',
                    maxWidth: 1150,
                    scanStyles: false,//设置为false时，库将不会处理应用于正在打印的html的样式。使用css参数时很有用。不然设置css没啥卵用
                    // 继承原来的所有样式
                    targetStyles: ["*"],
                    css: "@/components/print.css",
                    header: `<div style="display: flex;justify-content: space-between;">
                <div style="font-size:26px;line-height:40px;color:#272620">瑞佰快跑调度单</div>
                <div style="line-height: 40px;font-size: 16px;color:#272620">运单号：505554564645</div>
            </div> <div style="line-height: 22px;">客户名称：福州恒泰联创食品有限公司(电商)</div>
            <div style="line-height:22px;">发货地址：四川省成都市双流区九江街道万家社区8组220号</div>
            <div style="display: flex;line-height:22px"><span style="margin-right: 20px;">现场联系：张武安(13980075384)</span><span style="margin-right: 20px;">送货方式：公路运输</span><span>运货方式:汽运</span></div>`,
                    documentTitle: '',
                    style: `@page {size:auto;margin-top:20px; margin-left:30px; margin-right: 30px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
             
            }`,
                });
            }
            //判断是否IE浏览器
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                console.log('IE')
                printJS({
                    printable: 'mytable1', // 标签元素id
                    type: 'html',
                    header: '',
                    style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
                });
            }
        },

#全文

<template>
    <el-dialog :visible.sync="visible" title="打印" width="1051px" :close-on-click-modal="false" @open="handleOpen"
        :before-close="closeDialog">
        <div>
            <div style="display: flex;justify-content: space-between;">
                <div style="font-size:26px;line-height:40px;color:#272620">瑞佰快跑调度单</div>
                <div style="line-height: 40px;font-size: 16px;color:#272620">运单号：505554564645</div>
            </div>
            <div id="printAre">
                <div style="line-height: 22px;">客户名称：福州恒泰联创食品有限公司(电商)</div>
                <div style="line-height:22px;">发货地址：四川省成都市双流区九江街道万家社区8组220号</div>
                <div style="display: flex;line-height:22px"><span
                        style="margin-right: 20px;">现场联系：张武安(13980075384)</span><span
                        style="margin-right: 20px;">送货方式：公路运输</span><span>运货方式:汽运</span></div>
                <div class="data-card" id="mytable1">
                    <div class="content">
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column type="index" label="NO" width="50">
                            </el-table-column>
                            <el-table-column prop="name" label="订单号" width="120">
                            </el-table-column>
                            <el-table-column prop="age" label="原始单号" width="120">
                            </el-table-column>
                            <el-table-column prop="gender" label="收货人" width="120">
                            </el-table-column>
                            <el-table-column prop="province" label="电话" width="120">
                            </el-table-column>
                            <el-table-column prop="city" label="收货地址" width="400">
                            </el-table-column>
                            <el-table-column prop="address" label="货物数量" width="80">
                            </el-table-column>
                        </el-table>
                        <div style="display: flex;justify-content: space-between;line-height: 30px;">
                            <div>毛重合计(吨)：3.300</div>
                            <div>体积(m³)：390.500</div>
                            <div>总合计：500</div>
                        </div>
                        <div style="display: flex;justify-content: space-between;line-height: 30px;font-size: 12px;">
                            <div>打印次数：首次打印</div>
                            <div>货车司机：张三</div>
                            <div>车牌号：川A99999</div>
                            <div>温控仪：3882(TR-2B)</div>
                        </div>
                        <div style="display: flex;font-size: 12px;">
                            <div style="margin-right: 50px;">打印：王师傅 2023.05.05</div>
                            <div>敬请点清品种和数量后签收，如有问题请电至028-35552147</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <el-button type="primary" v-print="printAre">打印</el-button> -->
            <el-button type="primary" @click="handlePrint">打印</el-button>
        </div>
    </el-dialog>
</template>
  
<script>
import printJS from 'print-js'

import {
    ti_payment
} from "@/api/common";
export default {
    name: "Popup",
    props: {
        visible: {
            type: Boolean,
            required: true,
        },
        rowdata: {
            type: [Object, String],
            default: "",
        },

    },
    data() {
        return {
            order: "WRB1683615783653147",
            // 打印设置
            printAre: {
                id: "printAre",
                popTitle: "页眉部分",
                extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
            },
            tableData: [{
                name: '2790027913',
                age: "2790027913",
                gender: '独孤求败',
                province: '13554152623',
                city: '四川省成都市双流区九江北地铁站c口旁边往前两百米',
                address: '450',
            },
            {
                name: '2790027913',
                age: "2790027913",
                gender: '独孤求败',
                province: '13554152623',
                city: '四川省成都市双流区九江北地铁站c口旁边往前两百米',
                address: '450',
            },
            {
                name: '2790027913',
                age: "2790027913",
                gender: '独孤求败',
                province: '13554152623',
                city: '四川省成都市双流区九江北地铁站c口旁边往前两百米',
                address: '450',
            },
            {
                name: '2790027913',
                age: "2790027913",
                gender: '独孤求败',
                province: '13554152623',
                city: '四川省成都市双流区九江北地铁站c口旁边往前两百米',
                address: '450',
            },
            {
                name: '2790027913',
                age: "2790027913",
                gender: '独孤求败',
                province: '13554152623',
                city: '四川省成都市双流区九江北地铁站c口旁边往前两百米',
                address: '450',
            },
            {
                name: '2790027913',
                age: "2790027913",
                gender: '独孤求败',
                province: '13554152623',
                city: '四川省成都市双流区九江北地铁站c口旁边往前两百米',
                address: '450',
            },
            ],

        }
    },
    mounted() {
        clearInterval(this.timer);
    },
    methods: {
        // body{zoom:80%;}  缩放比例
        handlePrint() {
            let userAgent = navigator.userAgent;
            //判断是否Firefox浏览器
            if (userAgent.indexOf("Firefox") > -1) {
                console.log('Firefox')
                printJS({
                    printable: 'mytable1', // 标签元素id
                    type: 'html',
                    header: '',
                    style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
                });
            }
            //判断是否chorme浏览器
            if (userAgent.indexOf("Chrome") > -1) {
                console.log('Chrome')
                printJS({
                    printable: 'mytable1', // 标签元素id
                    type: 'html',
                    maxWidth: 1150,
                    scanStyles: false,//设置为false时，库将不会处理应用于正在打印的html的样式。使用css参数时很有用。不然设置css没啥卵用
                    // 继承原来的所有样式
                    targetStyles: ["*"],
                    css: "@/components/print.css",
                    header: `<div style="display: flex;justify-content: space-between;">
                <div style="font-size:26px;line-height:40px;color:#272620">瑞佰快跑调度单</div>
                <div style="line-height: 40px;font-size: 16px;color:#272620">运单号：505554564645</div>
            </div> <div style="line-height: 22px;">客户名称：福州恒泰联创食品有限公司(电商)</div>
            <div style="line-height:22px;">发货地址：四川省成都市双流区九江街道万家社区8组220号</div>
            <div style="display: flex;line-height:22px"><span style="margin-right: 20px;">现场联系：张武安(13980075384)</span><span style="margin-right: 20px;">送货方式：公路运输</span><span>运货方式:汽运</span></div>`,
                    documentTitle: '',
                    style: `@page {size:auto;margin-top:20px; margin-left:30px; margin-right: 30px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
             
            }`,
                });
            }
            //判断是否IE浏览器
            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                console.log('IE')
                printJS({
                    printable: 'mytable1', // 标签元素id
                    type: 'html',
                    header: '',
                    style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              border: 1px solid #000;
            }
            tbody {
              text-align: center;
            }
            table {
              border-collapse: collapse;
            }`,
                });
            }
        },
        handleRemove(file, fileList) {
            fileList.forEach((item, index) => {
                if (index == 0) {
                    this.from.paymen_file = item.response.data
                } else {
                    this.from.paymen_file += ',' + item.response.data
                }
            })
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl.push(file.url)
            this.dialogVisible = true;
            console.log(this.dialogImageUrl)
        },
        onsuccess(response, file, fileList) {
            fileList.forEach((item, index) => {
                if (index == 0) {
                    this.from.paymen_file = item.response.data
                } else {
                    this.from.paymen_file += ',' + item.response.data
                }
            })
            console.log(this.from.paymen_file)
        },
        submit(e) {
            this.from.id = this.rowdata.id
            this.$refs.from.validate((valid) => {
                if (valid) {
                    this.from.id = this.rowdata.id
                    ti_payment(this.from).then(res => {
                        if (res.code == 200) {
                            this.$emit("isnew", 12);
                            this.$message.success(res.msg)
                            this.$emit("update:visible", false);
                        } else {
                            this.$message.error(res.msg)
                        }
                    }).catch(err => {
                        this.$message.error(err.msg)
                    })
                }
            })



        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        //   // 选择类型
        onType(id) {
            this.ruleForm.type = id;
            let { money, type } = this.ruleForm;
            if (money && type) return this.getCode();
        },
        //   // // 输入框监听
        inputChange() {
            if (this.rowdata.ti_money != this.from.ti_solid_money && this.from.ti_solid_money !== '') {
                this.isfalssf = true
            } else {
                this.isfalssf = false

            }
        },

        //   // // 打开popup时的回调
        handleOpen() {
            this.logotype = this.$store.state.userinfo.type
            // this.ruleForm.order = this.rowData.order;

        },
        cancel() {
            // 取消
            this.closeDialog();
        },
        handone(res) {
            this.from.pay_bill_file = res.data;
        },
        closeDialog() {
            // 弹窗关闭前的回调
            setTimeout(() => {
                this.codeImg = "";
                this.success = false;
                clearInterval(this.timer);
                this.$refs["ruleForm"].resetFields();
            }, 1000);
            this.$emit("update:visible", false);
        },
    },
};
</script>
  
<style lang="less" scoped>
.titbig {
    font-size: 30px;
    font-weight: 400;
}

.felx {
    display: flex;
}

.spsb {
    justify-content: space-between;
}

.paymoeny {
    font-weight: bold;
    font-size: 16px;
    color: #333333;
}

.smal {
    margin-left: 10px;
    font-size: 12px;
}

.htmlts {
    width: 100%;
    height: 100%;
}

.demo-ruleForm {
    .form-content {
        position: relative;

        .input-tip {
            position: absolute;
            top: 8px;
            right: 130px;

            font-size: 14px;
            color: #333333;
        }

        /deep/input {
            color: #009688;
        }
    }

    .type-item {
        padding: 6px 15px;
        border: 1px solid #e6e6e6;
        font-size: 14px;
        line-height: normal;
        color: #666666;
        margin-right: 8px;
        overflow: hidden;
    }

    .type-item.active {
        border: 1px solid #009688;
        color: #009688;
        position: relative;
    }

    .type-item.active::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        background: #009688;
        position: absolute;
        bottom: -7px;
        right: -7px;
        transform: rotate(45deg);
    }

    .code-box {
        margin-top: 20px;
        height: 200px;

        .code-tip {
            font-size: 14px;
            color: #333333;
        }

        .code-img {
            width: 160px;
            height: 160px;
            border: 1px solid #e6e6e6;
            box-sizing: border-box;
        }
    }
}

.titsa {
    border: 1px solid #f0f0f0;
    border-bottom: none;
    font-size: 12px;
    color: #333333;
    font-weight: bold;
    line-height: 30px;
    background-color: #f7f8fa;
    text-indent: 10px;
}

.titlhead {
    background-color: #FFF6F6;
    color: #FF1A1A;
    line-height: 30px;
    margin: 10px 0;
}

.waip {
    width: 100%;
    border: 1px solid #f0f0f0;
    padding: 10px;
}

.btnbgc {
    background-color: #009688;
    color: #fff;
}
</style>
m0_61828394
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
iOS 自动布局及适配iPhone6
04-29
iOS 自动布局及适配iPhone6, 很详细的文档，你值得拥有
js调用打印机打印网页字体总是缩小一号的解决方法
源码好优多
02-23 5344
直接调用window.print()，但是打印出来后，字体总是缩小一号,后来直接target="_blank"，就可以正常打印了，下面是实现代码 今天要做一个打印网页的小功能，直接调用window.print()，但是打印出来后，字体总是缩小一号，找不到原因。。。  后来尝试用一个IE的打印控件，但仅支持ie有点恶心，只能返回去继续找原因  原来，我要打印的页面因
打印控件的自动缩放功能
09-16 942
有时一页的内容宽度或高度超过了，选择纸张的大小，这在正常情况下，超出的部分就会被截去，如下图所示(A)所示，为了避免这种情况，控件允许你通过设置 fitToPage属性，来缩小打印，这样就可以在纸张过小的情况下，也能打印所有的页面内容，如下图(B)所示。 (A) 纸
print.js 打印
最新发布
qq_59574258的博客
03-26 1083
例如：['border', 'padding']，将包括'border-bottom', 'border-top', 'border-left', 'border-right', 'padding-top'等。打印pdf时，如果浏览器不兼容（请检查浏览器兼容性表），库将在新选项卡中打开pdf。打印pdf时，如果浏览器不兼容（请检查浏览器兼容性表），库将在新选项卡中打开pdf。设置为false时，库不会处理应用于正在打印的html的样式。打印html、图像或json时，这将显示为文档标题。
vue+element-ui前端使用print-js实现打印,可自定义样式（横纵向，缩放比，字体大小，背景色）
热门推荐
qq_42571665的博客
10-12 2万+
实现纯前端的打印功能，可自定义打印样式，使用print-js实现，设置打印默认横纵向，设置打印默认缩放比，修改打印字体，修改背景色。
android分辨率适配，xml自动生成工具
10-23
这是一款可以自动生成各个屏幕分辨率.xml文件的工具，内含demo和注释，教你怎么应用，非常好用，欢迎star！
解决printJS打印问题汇总
io_123io_123的博客
07-04 5272
解决printJS打印问题汇总
js window.print打印页面缩放
qq_38060935的博客
08-12 4722
javascirpt``` document.getElementsByTagName(‘body’)[0].style.zoom=0.8;
js打印html内容字体设置
Mr.Tang的博客
06-10 1735
因为浏览器的限制，使打印内容的字体默认最小12px，如果想使打印的字体缩小，只能通过以下css方式解决： // 比例缩放 .charngeFont{ font-size:12px transform: scale(0.9); -webkit-transform: scale(0.8); } 原理：将块整体缩小比例呈现，这样变相的对字体进行缩小设置。 ...
js调用打印，并且将页面缩放后进行打印，同时可自定义分页打印demo
Leemeea的博客
08-07 3320
话不多说，直接上demo，注释备注相当清晰 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>缩放打印与分页</title> <script type="te...
html打印页面设置缩放,js使用页面打印window.print() 记录，并进行缩放打印
weixin_29214691的博客
06-03 3478
//打印print:function(){//获取打印的页面内容let subOutputRankPrint = document.getElementById('print-div');let newContent = subOutputRankPrint.innerHTML;let oldContent = document.body.innerHTML;document.body.inner...
Android 适配资源文件自动生成器
05-03
代码为博客实例：http://blog.csdn.net/lmj623565791/article/details/45460089 有问题请博客留言。
自动适配屏幕的网格布局效果
04-02
该源码实现可自动适配屏幕的网格布局效果，当我们切换到横屏或竖屏时，屏幕自动调整屏幕的大小以及位置等，而且不但可以设置好每个网格的间距效果，还可以设置每行网格的数目等，喜欢的ios开发朋友可以下载研究一下。
移动web 第五天移动端适配
12-25
移动web 移动端适配
iOS自动适配
11-27
// iOS适配 自动适配 手动适配 // 只需要在要适配的控制器上加下面3句话,即可完成自动适配 #pragma mark- AutoAjustAttag - (void)dealloc{ // 销毁参照 [self.view removeRelation]; } - (void)viewWillAppear:(BOOL)animated{ // 自动适配 [self.view setAutoAjustWithSupderAccordingFrame:SGKScreenFrameIPhone3_5Portrait]; } - (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration{ // 手动旋转适配 [self.view autoAjustRelationWithInterfaceOrientation:toInterfaceOrientation]; }
自动适配Demo
07-18
自动适配
web项目适配手机 通用js
11-17
* MobileWeb 通用功能助手，包含常用的 UA 判断、页面适配、search 参数转 键值对。 * 该 JS 应在 head 中尽可能早的引入，减少重绘。
移动 web 端屏幕适配(rem)
09-28
主要介绍了移动 web 端屏幕适配(rem)。详细的介绍了移动 web 端屏幕适配（rem），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决vue-print插件打印时表格宽度无法撑满自适应
ic_xcc的博客
07-16 9537
最近帮同事解决一个前端页面布局问题，技术背景vue+elementui，出现问题如下：点击详情表格布局一切正常（列数不固定，估计后端返回决定）点击打印之后的表格出现不能撑满，多出空白列的情况。 未点击打印时布局展示 经过各种调试主要解决由：tableLayout属性用来显示表格单元格、行、列的算法规则 ①auto：（默认值）列宽度由单元格内容设定； ②fixed: 列宽由表格宽度和列宽度设定； ③inherit：规定应该从父元素继承table-layout属性的值。 /设置表格...
vue web端页面适配
06-10
Vue web端页面适配一般可以通过CSS3中的弹性盒子布局（Flexbox）、栅格系统等方式进行实现。 1. 使用Flexbox布局 Flexbox是一种弹性盒子布局模型，可以轻松实现页面自适应。通过在父元素上设置display: flex;，子元素会自动排列并根据剩余空间自动调整大小。 2. 使用栅格系统 栅格系统是一种基于网格布局的响应式设计思想，可以使网页内容在不同的屏幕尺寸下自适应。在Vue中可以使用第三方库如Element UI或Bootstrap Vue来实现栅格系统布局。 3. 使用媒体查询 媒体查询是一种CSS3的新特性，可以根据设备屏幕尺寸不同应用不同的样式。通过使用@media规则来设置不同的CSS样式，可以实现在不同的屏幕尺寸下适配页面。 以上是几种常用的Vue web端页面适配方法，可以根据具体情况选择最适合的方式进行实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值