demo

Tip:

1. Print no refresh returns can be used with any framework including native JS 2. Print the input value, support input, Textarea, SELECT, single box, check box 3. Print the values as they are entered. By default, iView and Element-UI dom structures are supported (other UI libraries have not been tested, as long as the DOM structure is the same as iView and Element-UI, it can be used)

4. Print :after that does not support CSS, so customize the style of the single check box in the print function. Code as above 2 pictures. Do not modify the above code if the style does not have special requirements 5.doc.querySelector(‘#app’); The top-level element under body, modified by its own project ID or class. As shown in figure 6. It’s best not to have #app level elements. If you must have horizontal elements, you need to save all elements at the same level as #app

JS code

/** * @description: /** * @description: /** * @description: /** * @description: /** * @description: /** * @description: /** * @description: /** * @description: If I have to have horizontal elements, **/ export function printing({printTarget}) {let textareaArr = []; let inputArr = {}; let checkedArr = {}; let radioArr = {}; let doc = document; let body = doc.body; let app = doc.querySelector('#app'); Router. AddRoutes (router. AddRoutes, router. AddRoutes, router. */ / let menu = doc.querySelector('. El-menu --vertical'); Let contentPrint = doc. QuerySelector (' ${printTarget} '); //. / / to print / * * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * * / let input = contentPrint.querySelectorAll('input'); For (let I = 0; i < input.length; i++) { if (input[i].type === 'text') { inputArr[i] = input[i].value } else if (input[i].type === 'checkbox') { checkedArr[i] = input[i].checked } else if (input[i].type === 'radio') { radioArr[i] = input[i].checked } } let textarea  = contentPrint.querySelectorAll('textarea'); For (let item of textarea) {textareaarr.push (item.value)} / * * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * * * * * / / comment **/ contentPrint.classList.add('content-printing'); // Add class to distinguish the same class body.removechild (app); / / remove the body under the top element body. The innerHTML = contentPrint. ParentElement. InnerHTML; Body.style. cssText += 'display: flex; justify-content: center; '; / center/print / * * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * * / let  printInput = doc.querySelectorAll('.content-printing input'); For (let I = 0; i < printInput.length; i++) { if (printInput[i].type === 'text') { printInput[i].value = inputArr[i]; } else if (printInput[i].type === 'checkbox') { printInput[i].checked = checkedArr[i]; / / check box style printInput [I] previousElementSibling. Style. The display = 'none'; printInput[i].style.cssText += 'width: 14px; \n' + ' height: 14px; \n' + ' position: static; \n' + ' z-index: auto; \n' + ' opacity: 1; ' } else if (printInput[i].type === 'radio') { printInput[i].checked = radioArr[i]; / / single box style printInput [I] previousElementSibling. Style. The display = 'none'; printInput[i].style.cssText += ' position: static; \n' + ' opacity:1; ' } } let printTextarea = doc.querySelectorAll('.content-printing textarea'); // Textarea for (let I = 0; i < printTextarea.length; i++) { printTextarea[i].value = textareaArr[i]; } / * * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * * / / / print window.print(); body.style.cssText = ''; doc.querySelector('.content-printing').remove(); AppendChild (app); // Remove the printed content after printing or canceling. /** * Uncomment this line and add it back to menu **/ / if (menu) {// body.appendChild(menu); / /}}Copy the code

VUE call

<template> <! -- <el-dialog--> <! -- title=" print "--> <! -- :visible.sync="bool"--> <! -- width="30%"--> <! -- :before-close="close">--> < modal-V-model ="bool" @on-cancel="close" title=" print" : Transfer ="false"> <div class="print"> <h1>iview</h1> <Input v-model="value" placeholder="Enter something..." /> <Radio group V-model ="animal"> <Radio >< Radio label=" animal"> </Radio> <Radio label=" Javan "></Radio> <Radio label=" Javan "></Radio> </RadioGroup> <CheckboxGroup v-model="social"> <Checkbox label="twitter"> <Icon type="logo-twitter"></Icon> <span>Twitter</span> </Checkbox> <Checkbox label="facebook"> <Icon type="logo-facebook"></Icon> <span>Facebook</span> </Checkbox> <Checkbox label="github"> <Icon type="logo-github"></Icon> <span>Github</span> </Checkbox> <Checkbox label="snapchat"> <Icon type="logo-snapchat"></Icon> <span>Snapchat</span> </Checkbox> </CheckboxGroup> <Input v-model="value16" maxlength="100" show-word-limit type="textarea" placeholder="Enter something..." style="width: 200px" /> <Select v-model="model1" style="width:200px"> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> </Select> <h1>element-ui</h1> <el-select v-model="selectValue" Placeholder =" please select "> <el-option V-for ="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-select> < EL-input V-model ="input" placeholder=" placeholder "></el-input> <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder=" input content "v-model=" textareA2 "> </el-input> <el-radio-group V-model ="radio"> <el-radio Optional item: label = "3" > < / el - radio > < el - radio: label = "6" > alternative < / el - radio > < el - radio: label = "9" > alternative < / el - radio > < / el - radio - group > <el-checkbox-group V-model ="checkList"> < EL-Checkbox Label =" Checkbox A"></ el-Checkbox >< EL-Checkbox label=" checkbox B"></el-checkbox> <el-checkbox label=" checkbox C"></el-checkbox> </el-checkbox-group> <! -- <h1> Custom DOM structure </h1>--> <! -- <div>--> <! -- <input type="radio" name="sex" value="male">Male--> <! -- <input type="radio" name="sex" value="female">Female--> <! - < / div > -- > < / div > < template slot = "footer" > < div > < Button @ click = "print" > print < / Button > < / div > < / template > < / Modal > <! -- </el-dialog>--> </template> <script> import {printing} from './js/print' export default { name: "modal-print", props: { isShow: Boolean }, data() { return { checkList: [], radio:'', textarea2:'', input:'', options: Value: [{' option 1 'label:' yellow golden cake '}, {value: 'option 2, label:' double peel milk '}, {value: 'option 3, label:' oyster omelet}, {value: 'option 4, the label: }, {value: 'selectValue ', bool: false, value: animal: ', Social: [], value16: '', cityList: [ { value: 'New York', label: 'New York' }, { value: 'London', label: 'London' }, { value: 'Sydney', label: 'Sydney' }, { value: 'Ottawa', label: 'Ottawa' }, { value: 'Paris', label: 'Paris' }, { value: 'Canberra', label: 'Canberra' } ], model1: '' } }, watch: { isShow(val) { this.bool = val } }, methods: { print() { printing({printTarget: '.print'}) }, close() { this.$emit('close') } } } </script>Copy the code