Vue实战篇十九：使用printjs打印表单
原创
©著作权归作者所有：来自51CTO博客作者zhuhuix的原创作品，请联系作者获取转载授权，否则将追究法律责任
系列文章目录
Vue基础篇一：编写第一个Vue程序
Vue基础篇二：Vue组件的核心概念
Vue基础篇三：Vue的计算属性与侦听器
Vue基础篇四：Vue的生命周期（秒杀案例实战）
Vue基础篇五：Vue的指令
Vue基础篇六：Vue使用JSX进行动态渲染
Vue提高篇一：使用Vuex进行状态管理
Vue提高篇二：使用vue-router实现静态路由
Vue提高篇三：使用vue-router实现动态路由
Vue提高篇四：使用Element UI组件库
Vue提高篇五：使用Jest进行单元测试
Vue提高篇六： 使用Vetur+ESLint+Prettier插件提升开发效率
Vue实战篇一： 使用Vue搭建注册登录界面
Vue实战篇二： 实现邮件验证码发送
Vue实战篇三：实现用户注册
Vue实战篇四：创建多步骤表单
Vue实战篇五：实现文件上传
Vue实战篇六：表格渲染动态数据
Vue实战篇七：表单校验
Vue实战篇八：实现弹出对话框进行交互
Vue实战篇九：使用省市区级联选择插件
Vue实战篇十：响应式布局
Vue实战篇十一：父组件获取子组件数据的常规方法
Vue实战篇十二：多项选择器的实际运用
Vue实战篇十三：实战分页组件
Vue实战篇十四：前端excel组件实现数据导入
Vue实战篇十五：表格数据多选在实际项目中的技巧
Vue实战篇十六：导航菜单
Vue实战篇十七：用树型组件实现一个知识目录
Vue实战篇十八：搭建一个知识库框架
Vue实战篇十九：使用printjs打印表单
文章目录
一、打印表单的两种方法
- 本文主要介绍vue中使用printjs插件打印表单的两种方法：
1.1 方法1
<template>
<div class="app-container">
...
<el-dialog
append-to-body
:close-on-click-modal="false"
:visible.sync="showDialog"
:title="'订单发货'"
width="80%"
>
<!-- 表单 -->
<el-form id="printForm" ref="form" :model="order" :inline="true" size="mini" label-width="80px">
<el-form-item label="订单号">
<el-input v-model="order.orderNo" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="合同号">
<el-input v-model="order.contractNo" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="物料编码">
<el-input v-model="order.materialCode" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="物料名称">
<el-input v-model="order.materialName" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="型号">
<el-input v-model="order.materialModel" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="规格">
<el-input v-model="order.materialStd" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="订单量">
<el-input v-model="order.qty" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="已发货量">
<el-input v-model="order.deliveryQty" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="发货量">
<el-input v-model="deliveryQty" oninput="value=value.replace(/[^0-9.]/g,'')"style="width:" />
</el-form-item>
<el-form-item label="备注" prop="remarks" size="mini">
<el-input v-model="remarks"style="width:" />
</el-form-item>
<el-row>
</el-row></el-form>
<div slot="footer" class="dialog-footer">
<el-button v-if="!purchase" type="text" @click="cancel">取消</el-button>
<el-button v-if="!purchase" :loading="saving" type="primary" @click="submit">确认</el-button>
<el-button v-if="!purchase" type="primary" @click="print">打印</el-button>
</div>
</el-dialog>
</div>
</template>
<script>...
// 引入插件中的打印方法
import printJS from 'print-js'
export default {
...
print() {
// 打印表单
this.$print(this.$refs.form)
}
}
}</script>
- 打印效果
1.1 方法2
import Vue from 'vue'
import Element from 'element-ui'
import App from './App'
import store from './store'
import router from './router/routers'
// 打印
import Print from './utils/print'
Vue.use(dict)
Vue.use(Element, {
size: Cookies.get('size') || 'small' // set element-ui default size
})
Vue.use(Print)
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
<template>
<div class="app-container">
...
<el-dialog
append-to-body
:close-on-click-modal="false"
:visible.sync="showDialog"
:title="'订单发货'"
width="80%"
>
<!-- 表单 -->
<el-form id="printForm" ref="form" :model="order" :inline="true" size="mini" label-width="80px">
<el-form-item label="订单号">
<el-input v-model="order.orderNo" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="合同号">
<el-input v-model="order.contractNo" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="物料编码">
<el-input v-model="order.materialCode" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="物料名称">
<el-input v-model="order.materialName" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="型号">
<el-input v-model="order.materialModel" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="规格">
<el-input v-model="order.materialStd" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="订单量">
<el-input v-model="order.qty" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="已发货量">
<el-input v-model="order.deliveryQty" :disabled="true"style="width:" />
</el-form-item>
<el-form-item label="发货量">
<el-input v-model="deliveryQty" oninput="value=value.replace(/[^0-9.]/g,'')"style="width:" />
</el-form-item>
<el-form-item label="备注" prop="remarks" size="mini">
<el-input v-model="remarks"style="width:" />
</el-form-item>
<el-row>
</el-row></el-form>
<div slot="footer" class="dialog-footer">
<el-button v-if="!purchase" type="text" @click="cancel">取消</el-button>
<el-button v-if="!purchase" :loading="saving" type="primary" @click="submit">确认</el-button>
<el-button v-if="!purchase" type="primary" @click="print">打印</el-button>
</div>
</el-dialog>
</div>
</template>
<script>...
export default {
...
print() {
// 打印表单
printJS('printForm', 'html')
}
}
}</script>
- 打印效果
