window.print实现打印预览和打印功能问题记录

打印的 JS 方法

// 打开打印模板和预览
export const printMethod = (myDiv) => {
    let printHtml = document.getElementById(myDiv).innerHTML;

    let wind = window.open('', 'newwindow', 'width=' + (window.screen.availWidth - 10) + ',height=' + (window.screen.availHeight - 30) + ',top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
    wind.document.body.innerHTML = printHtml;
    wind.document.body.style.margin = '0';
    wind.document.body.style.padding = '0';

    let style = wind.document.createElement('style');
    style.type = 'text/css';
    // style.media = 'print';
	
	// 解决列表分页截断问题添加 tr{page-break-inside: avoid;} 
    try {
        style.appendChild(wind.document.createTextNode('.wrap:nth-of-type(even) .space{bottom:-12pt!important;} tr{page-break-inside: avoid;}'));

    } catch (ex) {
        style.styleSheet.cssText = '.title{font-size:12pt;font-weight:900;}'; 

    }

    let head = wind.document.getElementsByTagName('head')[0];
    head.appendChild(style);

    setTimeout(function () {
        wind.print();
    }, 200)
    return false;
}

打印模板主要代码

<template>
    <div id="printPage">
        <div v-if="noData" style="text-align:center;margin-top:10pt;">
            <p>没有可打印的数据p>
        div>
        <div v-if="!noData" style="font-family:'宋体';width:100%;color:#000;;text-align: center;margin:0 auto;padding-left:1.6cm;box-sizing:border-box;">
        	
        	<p style="text-align:center;font-size:26pt;margin-top:21pt;margin-bottom:14pt;display:inline-block;">
        		<span style="text-shadow:0.15pt 0px 0px black,0.25pt 0px 0px black,0.35pt 0px 0px black,-0.25pt 0px 0px black,0px 0.25pt 0px black,0px -0.25pt 0px black;">
        			{{ formType == 1 ? '申请单A' : '申请单B'}}
        		span>
        	p>
            
            <div style="margin-top: 3pt;" v-if="formType == 1">
            	
	            <table style="border-collapse:collapse;border:1.5pt solid #000;width:100%;margin-bottom: -1.5pt;" cellpadding="5">                
	                
	            table>
            div>
            <div style="margin-top: 3pt;" v-else>
            	
	            <table style="border-collapse:collapse;border:1.5pt solid #000;width:100%;margin-bottom: -1.5pt;" cellpadding="5">                
	                
	            table>
            div>            
        div>
    div>
template>

<script>
    import { getFormADetail, getFormBDetail } from '@/api/applyForm'
    import { printMethod, addUp } from '@/libs/print'
    export default {
        name: 'PrintApplyForm',
        props: {
            value: {
                type: String,
                default: null,
                require: true
            }
        },
        watch: {
            value: {
                handler(val) {
                    if (val) {
                        this.print()
                    }
                },
                immediate: true
            }

        },
        data() {
            return {
                noData: false,
                aData: {},
                bData: {}
            }
        },
        methods: {
            print() {
                if (String(this.value).indexOf('YQ') == -1) {
                	this.getDetailB()
                } else {
                	this.getDetailA()
                }
            },
            // 申请单A详情
            getDetailA() {
            	getFormADetail({ extractSumId: this.value }).then(res => {
                    this.aData= res.data.data
                    if (res.data.data) {
                        this.noData = false
                    } else {
                        this.noData = true
                    }
                    this.$nextTick(function () {
                        printMethod('printPage');
                        this.$emit('input', null)
                    })
                }).catch(err => {})
            },
            // 申请单B详情
            getDetailB() {
            	getFormADetail({ extractSumId: this.value }).then(res => {
                    this.bData= res.data.data
                    if (res.data.data) {
                        this.noData = false
                    } else {
                        this.noData = true
                    }
                    this.$nextTick(function () {
                        printMethod('printPage');
                        this.$emit('input', null)
                    })
                }).catch(err => {})
            }
        }
    }
script>

<style lang="less" scoped>style>

期望效果

• 选中一条A数据，点击打印，弹出申请单A打印模板进行预览，并支持打印
• 选中一条B数据，点击打印，弹出申请单B打印模板进行预览，并支持打印

实际效果

1. 问题一

先选中一条A数据，点击打印，效果正常；再选中一条B数据，点击打印，弹出的还是申请单A模板和相应的数据，打印formType已经更新变成了2，B数据相关接口也都调用了，但是页面就是没刷新。

解决方法：

将页面绑定的id改成根据formType来动态变化，printMethod方法传参也进行调整如下：

<div :id="formType == 1 ? 'printAPage' : 'printBPage'">

// 申请单A详情
getDetailA() {
	getFormADetail({ extractSumId: this.value }).then(res => {
        this.aData= res.data.data
        if (res.data.data) {
            this.noData = false
        } else {
            this.noData = true
        }
        this.$nextTick(function () {
        	// 传参改变
            printMethod('printAPage');
            this.$emit('input', null)
        })
    }).catch(err => {})
},
// 申请单B详情
getDetailB() {
	getFormADetail({ extractSumId: this.value }).then(res => {
        this.bData= res.data.data
        if (res.data.data) {
            this.noData = false
        } else {
            this.noData = true
        }
        this.$nextTick(function () {
        	// 传参改变
            printMethod('printBPage');
            this.$emit('input', null)
        })
    }).catch(err => {})
}

以上代码能够解决问题一，实现勾选列表不同数据切换不同模板打印。但是由于实际需求中列表页有个打印按钮，同时列表页还有一个历史数据按钮，点击历史数据，打开的是历史数据弹窗列表页，历史数据弹窗列表中也有一个打印按钮，同样也要实现勾选历史数据列表不同数据切换不同模板打印，通过自测发现还是有问题。

2. 问题二

先在列表页点击A数据正常弹出申请单A模板，回显相应的A数据；然后点击B数据正常弹出申请单B模板，回显相应的B数据；
再点击历史数据按钮打开历史数据弹窗列表页：

• 点击C数据
  • 期望效果：弹出申请单A模板，回显相应的C数据；
  • 实际效果：正常
• 点击D数据
  • 期望效果：弹出申请单B模板，回显相应的D数据；
  • 实际效果：正常弹出B模板，但是回显的还是B数据

先在列表页点击B数据正常弹出申请单B模板，回显相应的B数据；然后点击A数据正常弹出申请单A模板，回显相应的A数据；
再点击历史数据按钮打开历史数据弹窗列表页：

• 点击C数据
  • 期望效果：弹出申请单A模板，回显相应的C数据；
  • 实际效果：正常弹出A模板，但是回显的还是A数据
• 点击D数据
  • 期望效果：弹出申请单B模板，回显相应的D数据；
  • 实际效果：正常

解决方法：

通过key来刷新

<div :id="formType == 1 ? 'printAPage' + key : 'printBPage' + key">

watch: {
   value: {
        handler(val) {
            if (val) {
            	this.randomKey()
                this.print()
            }
        },
        immediate: true
    }

},
data() {
    return {
        key: 0, // 强制重新渲染
        noData: false,
        aData: {},
        bData: {}
    }
},
methods: {
    randomKey() {
        this.key++
    },
    // 申请单A详情
    getDetailA() {
    	getFormADetail({ extractSumId: this.value }).then(res => {
            this.aData= res.data.data
            if (res.data.data) {
                this.noData = false
            } else {
                this.noData = true
            }
            this.$nextTick(function () {
                printMethod('printAPage' + this.key);
                this.$emit('input', null)
            })
        }).catch(err => {})
    },
    // 申请单B详情
    getDetailB() {
    	getFormADetail({ extractSumId: this.value }).then(res => {
            this.bData= res.data.data
            if (res.data.data) {
                this.noData = false
            } else {
                this.noData = true
            }
            this.$nextTick(function () {
                printMethod('printBPage' + this.key);
                this.$emit('input', null)
            })
        }).catch(err => {})
    }
}

试了好久终于解决了，欢迎指正~~~