使用vue-print打印页面，并解决echarts打印时，在系统缩放200%或150%情况下显示变大异常。以及word字号和px的转换

于 2024-08-16 16:28:41 发布
阅读量137 收藏 3
点赞数 4
文章标签： vue.js javascript echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45856221/article/details/141261314
版权

需求，连接打印机，打印弹框里的内容，下图是需要打印的内容

父组件，DOM弹框代码

<el-dialog v-dialogDrag title="企业自检报告" :visible.sync="isShowPrint" width="794px" append-to-body>
			<div style="padding:73px">
                //这个id需要是项目里唯一的
				<div id="SelfInspectionReportId">
					<template >
                        //展示的内容组件
                        //业务需要的数据总条数totalNumberOfArticles，可以忽略
                        //itemform数据对象
						<SelfInspectionReport  
                       :totalNumberOfArticles="totalNumberOfArticles" 
                        :notice="itemform"/>
					</template>
				</div>
			</div>	
			<div class="dialog-printbuttons">
                //printoption 打印的样式配置
                //handlePrint 设置浏览器标签的标题，用于导出PDF时设置文件默认名
                //v-hasPermi="['safemgr:rectify:print']" 验证权限的，可忽略
				<el-button type="warning" plain 
                icon="el-icon-printer"
                 size="mini" v-print="printoption" 
                  @click="handlePrint(itemform.gasusername)" 
                    v-hasPermi="['safemgr:rectify:print']">
					打印
				</el-button>
			</div>
			<div slot="footer" class="dialog-footer" style="padding-right:20px">
				<el-button @click="isShowPrint=false">关 闭</el-button>
			</div>
		</el-dialog>

父组件，业务代码
 

data(){
    return {
        printoption: {
			id: 'SelfInspectionReportId',
			popTitle: '&nbsp;', // 打印配置页上方的标题
			extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
			preview: false, // 是否启动预览模式，默认是false
			//previewTitle: '预览的标题', // 打印预览的标题
			//previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
			zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
			// previewBeforeOpenCallback () { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
			// previewOpenCallback () { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
			// beforeOpenCallback () { console.log('开始打印之前！') }, // 开始打印之前的callback
			// openCallback () { console.log('执行打印了！') }, // 调用打印时的callback
			closeCallback: ()=> {
						this.$store.dispatch('settings/setTitle',this.systitle);
						//console.log('关闭了打印工具！')
					}, // 关闭打印的callback(无法区分确认or取消)
			// clickMounted () { console.log('点击v-print绑定的按钮了！') },
			// url: 'http://localhost:8080/', // 打印指定的URL，确保同源策略相同
			// asyncUrl (reslove) {
			//   setTimeout(() => {
			//     reslove('http://localhost:8080/')
			//   }, 2000)
			// },
			standard: '',
			extraCss: 'css/printmargin.css',
			
		},
    }
},
methods:{
    //打印事件
		handlePrint(t){
			// console.log(this.$store.state.settings.setTitle,'this.$store.state.settings.setTitle')
			this.systitle=this.$store.state.settings.setTitle;
			this.$store.dispatch('settings/setTitle',"企业自检"+(t!=undefined?'（'+t+'）':''));
		},
}

上图代码中的 css/printmargin.css 是用来引入样式的，这是一个文件地址，放在了public文件夹里的css文件中，文件名叫/printmargin.css，里面的内容是

@media print { 
  @page{
		margin: calc(25/25.4*96px);
  } 
}

遇到过的问题：

1.表格显示不全

解决办法，加样式

.report{
	padding: 0; //calc(25/25.4*96px);
	width: calc((210 - 50)/25.4*96px);
	font-size: 14px;
	color: #000;
	word-break: normal;
	position: relative;
	overflow: hidden;
}

2.echarts图形在弹筐里可以正常显示，但是打印的时候显示异常，原因是有的电脑系统的缩放是 200%有的是150%

解决办法，将图形转成svg

var myChart = echarts.init(document.getElementById("msb"), null, {renderer: "svg",});

弹框内容组件全部代码

<template>
<div v-if="notice!=undefined" class="report ff-fangsong fs16 nextpage">
    <div class="row">
        <div class="row-item">
            <div class="row-item-title f-b fs16">自检企业：</div>
            <div class="row-item-txt fs16">{{ notice.dn }}</div>
        </div>
        <div class="row-item">
            <div class="row-item-title f-b fs16">检查人：</div>
            <div class="row-item-txt fs16">{{ notice.rn }}</div>
        </div>
        <div class="row-item">
            <div class="row-item-title f-b fs16">检查时间：</div>
            <div class="row-item-txt fs16">{{ parseTime(notice.ct, '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
        </div>
    </div>
    <div class="item">
        <div class="item-title fs18">检查结论</div>
        <div class="item-txt fs16">在本次充装企业规范达标专项检查，该企业《{{notice.dn}}》，本次符合规范分数如下图</div>
        <div id="msb" ref="myChart" style="position:none !important;" class="item-content"></div>
    </div>
    <div class="item " >
        <div class="item-title fs18">隐患分布</div>
        <div class="item-txt fs16">充装企业规范达标专项检查，共计【{{sameAsDangers.length+majorDangers.length}}】项安全隐患，其中重大隐患【{{majorDangers.length}}】项，一般隐患【{{sameAsDangers.length}}】项，基于《瓶装液化气充装企业全面规范达标攻坚行动方案》{{recommendation!=''?`，建议您进行【${getDictLabel('dt_rectifyaction',recommendation)}】。`:'。'}}</div>
        <div id="yhfb" ref=myChart2 style="position:none !important;" class="item-content"></div>
    </div>
    
    <div class="item" style="page-break-before: always;">
        <div class="item-title fs18">重大隐患统计</div>
        <div class="item-txt fs16">充装企业规范达标专项检查，共计重大隐患【{{majorDangers.length}}】项，停业整改【{{stopDoingBusinessNum}}】项，立即停止违法行为【{{breakTheLaw}}】项，具体隐患如下：</div>
        <el-table class=" disablehover fs16" :data="majorDangers" >
            <el-table-column label="序号" type="index"/>
            <el-table-column prop="m" label="隐患"></el-table-column>
            <el-table-column prop="ra" label="整改措施">
                <template slot-scope="scope">
                    {{ rectificationMeasures(scope.row.ra) }}
                </template>
            </el-table-column>
            <el-table-column prop="ti" label="整改期限" ></el-table-column>
            <el-table-column prop="is" label="整改状态" >
                <template slot-scope="scope">
                    <!-- <div style="padding-right:35px;"> -->
                    {{ rectificationStatus(scope.row.is) }}
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="item">
        <div class="item-title fs18">一般隐患统计</div>
        <div class="item-txt fs16">本次充装企业规范达标专项检查，共计一般隐患【{{sameAsDangers.length}}】项，限期整改【{{deadlineNum}}】项，立即整改【{{immediatelyNum}}】项、具体隐患如下：</div>
        <el-table :data="sameAsDangers" class=" disablehover fs16">
            <el-table-column label="序号" type="index"/>
            <el-table-column prop="m" label="隐患"></el-table-column>
            <el-table-column prop="ra" label="整改措施" >
                <template slot-scope="scope">
                    {{ rectificationMeasures(scope.row.ra) }}
                </template>
            </el-table-column>
            <el-table-column prop="ti" label="整改期限"></el-table-column>
            <el-table-column prop="is" label="整改状态">
                <template slot-scope="scope">
                    <!-- <div style="padding-right:10px;"> -->
                    {{ rectificationStatus(scope.row.is) }}
                    <!-- </div> -->
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
export default {
    name: "SelfInspectionReport",
    dicts: ['dt_rectifyaction'],
    props: {
        notice:{type:Object,default:undefined},
        totalNumberOfArticles:{type:Number,default:0}
    },
    data(){
        return{
            fraction:0,
            //重大隐患
            majorDangers:[],
            //一般隐患
            sameAsDangers:[],
            /********重大*********/
            // 停业整改数量
            stopDoingBusinessNum:0,
            //停止违法行为
            breakTheLaw:0,
            /********一般*******/
            //限期整改
            deadlineNum:0,
            //立即整改
            immediatelyNum:0,
            //达标率
            complianceRate:0,
            //整改建议
            // recommendation:'',
        }
    },
    computed:{
        rectificationStatus(){
            return (v)=>{
                let txt ='';
                switch(v){
                    case 0:
                        txt = "待处理";
                    break;
                    case 1:
                        txt = "待审核";
                    break;
                    case 2:
                        txt = "审核通过";
                    break;
                }
                return txt;
            }
        },
        rectificationMeasures(){
            return (v)=>{
                let txt ='';
                this.dict.type.dt_rectifyaction.forEach((item,index)=>{
                    if(item.value == v){
                        txt = item.label
                    }
                })
                return txt;
            }
        },
        recommendation(){
            
            let arr = [...this.majorDangers,...this.sameAsDangers]
            let fn=undefined;
            let i=0;
            while (i<this.dict.type.dt_rectifyaction.length && fn == undefined) {
                fn = arr.find((a)=>{
                    return a.ra == this.dict.type.dt_rectifyaction[i].value
                })
                i++;
            }

            if(fn != undefined){
                return fn.ra;
            }else{
                return '';
            }
            
        }
    },
    created(){
        this.initData();
    },
    mounted(){
        this.initFun();
    },
    methods:{
        initFun(){
            var myChart = echarts.init(document.getElementById("msb"), null, {renderer: "svg",});
            var data=[{
                name:"达标率",
                value:this.complianceRate,
            }];
            var option = {
                tooltip:{},
                title:{
                    text:'',
                    x:'center',
                    y:25,
                },
                series: [
                    {
                        name: '单仪表盘',
                        type: 'gauge',
                        radius:"80%",
                        center:['50%','55%'],
                        sartAngle:225,
                        endAngle:-45,
                        clockwise:true,
                        min:0,
                        max:100,
                        splitNumber:10,
                        data:data,
                    }]
            };
            myChart.setOption(option,true);
            // setInterval(function() {
            //     option.series[0].data[0].value=(Math.random()*100).toFixed(2);
            //     myChart.setOption(option,true);
            // },2000);

            var myChart2 = echarts.init(document.getElementById("yhfb"), null, {renderer: "svg",});
            let data1=[
                {
                    value: this.sameAsDangers.length,
                    name: "一般隐患",
                },
                {
                    name: "重大隐患",
                    value: this.majorDangers.length,
                },
            ]
            this.fraction=data1[0].value+data1[1].value
            let option2 = {
                title: {
                    text: `总计${this.fraction}`,
                    x: "center",
                    y: "center",
                    textStyle: {
                        fontWeight: "normal",
                        color: "#000",
                        fontSize: "30",
                    },
                },
                color: ["#6294F9","#61D9AA"],
                legend: {
                    show: true,
                    itemGap: 12,
                    triggerOn:'none',
                    data: ["重大隐患", "一般隐患"],
                    // selected:{
                    //     "重大隐患":true ,
                    //     "一般隐患":true ,
                    // }
                },
                tooltip: {
                    show: true,
                    trigger: 'item',
                },
                series: [
                    {
                        type: "pie",
                        clockWise: true,
                        radius: ["50%", "66%"],
                        data: data1,
                    },
                ],
            };
            myChart2.setOption(option2,true);
            myChart2.on('legendselectchanged', function (event) {
                // return false;
                // let num1 = 0;
                // let num2 = 0;
                // if(event.selected['一般隐患']){
                //     num1 = data1[0].value;
                // }
                // if(event.selected['重大隐患']){
                //     num2 = data1[1].value;
                // }
                // this.fraction=num1+num2;
                // option2.title.text=`总计${this.fraction}`
                // option2.legend.selected['一般隐患']=event.selected['一般隐患']
                // option2.legend.selected['重大隐患']=event.selected['重大隐患']
                myChart2.setOption(option2,true)
            });
        },
        initData(){
            //重大
            this.majorDangers=this.notice.cl.filter((item,index)=>{
                if(item.l == 3){
                    return item
                }
            })
            //一般
            this.sameAsDangers=this.notice.cl.filter((item,index)=>{
                if(item.l == 2){
                    return item
                }
            })
            this.majorDangers.forEach((item,index)=>{
                if(item.is == 1){
                    this.stopDoingBusinessNum++;
                }
                if(item.is == 2){
                    this.breakTheLaw++;
                }
            })
            this.sameAsDangers.forEach((item,index)=>{
                if(item.is == 6){
                    this.deadlineNum++;
                }
                if(item.is == 5){
                    this.immediatelyNum++;
                }
            })
            let num1 = this.totalNumberOfArticles;
            let num2 = this.majorDangers.length+this.sameAsDangers.length;
            let num3 =num1-num2;
            let num4 = num3/num1*100;
            this.complianceRate=Math.round(num4);

            

        }

    },
    
    watch:{
        'notice.cid'(){
            this.initFun();
            this.initData();
        }
    }
}
</script>
    
<style lang="scss" scoped>
// .diy{
//     padding: 50px;
// }
.row{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .row-item{
        display: flex;
        .row-item-title{
        }
        .row-item-txt{
            // margin-left: 10px;
        }
    }
}
.item{
    display:flex;
    justify-content:center;
    flex-direction:column;
    margin: 10px 0px;
    .item-title{
        color: #1890FF;

    }
    .item-txt{

    }
    .item-content{
        margin: auto;
        width: 500px;
        height: 350px;
        // ::v-deep div{
        //     width:400px !important;
        //         height:300px !important;
        //         ::v-deep canvas{
        //         width:400px !important;
        //         height:300px !important;
        //     }
        // }
        // margin-top: 10px;
    }
    .nextpage{
        page-break-after:always;
    }
}

.report{
	padding: 0; //calc(25/25.4*96px);
	width: calc((210 - 50)/25.4*96px);
	font-size: 14px;
	color: #000;
	word-break: normal;
	position: relative;
	overflow: hidden;
}

</style>

字号

.f-b{
	//font-weight: bold;
	text-shadow:0.2pt 0px 0px black,0.2pt 0px 0px black,0.2pt 0px 0px black,-0.2pt 0px 0px black,0px 0.2pt 0px black,0px -0.2pt 0px black;
}

.fs12{	//对应9号字
	font-size: 12px;
}
.fs16{	//对应12号字
	font-size: 16px;
}
.fs18{ //对应14号字
	font-size: 18px;
}
.fs20{ //对应15号字
	font-size: 20px;
}
.fs24{ //对应18号字
	font-size: 24px;
}
.fs28{ //对应21号字
	font-size: 28px;
}

.ff-fangsong{
	font-family: "FangSong_GB2312","STFangsong","仿宋","Arial","Microsoft YaHei","黑体","宋体",sans-serif;
}
.ff-heiti{
	font-family: "SimHei","Microsoft YaHei","STHeiti","Arial","黑体","宋体",sans-serif;
}
.ff-songti{
	font-family: "SimSun","STSong","NSimSun","STZhongsong","Arial","宋体",sans-serif;
}
.ff-huawenzhongsong{
	font-family: "华文中宋","SimSun","STSong","NSimSun","STZhongsong","Arial","宋体",sans-serif;
}

vue-print教程地址，跳转

在线笔记
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值