element-easy-print
v2.2.3
Published
vue3.0 的通用设计器，基于element-Plus
Downloads
41
Maintainers
blueskyliuReadme
更新记录 2025-7-09
- 添加富文本
- 添加网页嵌套（不支持跨域）
更新记录 2025-6-12
- 添加列表
- 多页面设计功能
- 支持浏览器打印 驱动打印
更新记录 2025-4-27
- 修复表格插入问题
安装
npm install element-easy-print --save技术交流群
技术交流群 QQ 953344438
文档
演示地址
案例
仅供演示具体去文档地址
import {
EasyPrint,
PreviewPrint
} from 'element-easy-print'
import elementEasyPrint from 'element-easy-print'
import 'element-easy-print/dist/style.css'
app.use(elementEasyPrint);<template>
<div class="commonBoxmp">
<EasyPrint
v-model="previewDrawer"
:options="option"
:dataSource="datasource"
@handlePreview="handlePreview"
@handleSave="handleSave"
>
</EasyPrint>
<PreviewPrint
renderType="render"
v-model="previewDrawer"
:options="{
...previewData,
}"
/>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const previewDrawer = ref(false);
const previewData = ref();
const handleSave = (val: boolean, data: any) => {
console.log("data :>> ", val);
};
const handlePreview = (val: boolean, data: any) => {
previewDrawer.value = val;
console.log("data :>> ", data);
previewData.value = data;
};
const datasource = [
{
module_name: "客户",
module_field: "customer",
module_content: [
{
field: "editor_1732505813",
name: "编辑器",
field_data_id: 1,
},
{
field: "checkbox_1700212268",
name: "多选框组",
field_data_id: 1,
},
{
field: "selectcheckbox_1692251151",
name: "公司大小",
field_data_id: 1,
},
{
field: "cascader_1692251051",
name: "级联选择器",
field_data_id: 1,
},
{
field: "select_1692251046",
name: "公司规模",
field_data_id: 1,
},
{
field: "email",
name: "邮箱地址",
field_data_id: 1,
},
{
field: "description",
name: "备注",
field_data_id: 1,
},
{
field: "address",
name: "地址",
field_data_id: 1,
},
{
field: "industry",
name: "营业额",
field_data_id: 1,
},
{
field: "origin",
name: "客户来源",
field_data_id: 1,
},
{
field: "grade",
name: "等级",
field_data_id: 1,
},
{
field: "customer_status",
name: "跟进状态",
field_data_id: 1,
},
{
field: "website",
name: "地址",
field_data_id: 1,
},
{
field: "mobile",
name: "客户电话",
field_data_id: 1,
},
{
field: "name",
name: "客户名称",
field_data_id: 1,
},
{
field: "number",
name: "客户编号",
field_data_id: 1,
},
{
field: "creation_method",
name: "创建方式",
field_data_id: 1,
},
{
field: "visible_user_ids",
name: "团队成员",
field_data_id: 1,
},
{
field: "last_contact_time",
name: "最近跟进时间",
field_data_id: 1,
},
{
field: "lock_flag",
name: "锁定状态",
field_data_id: 1,
},
{
field: "address_location",
name: "经纬度坐标",
field_data_id: 1,
},
{
field: "next_contact_time",
name: "下次联系时间",
field_data_id: 1,
},
{
field: "contacts",
name: "首要联系人",
field_data_id: 1,
},
{
field: "deal_state",
name: "客户成交状态",
field_data_id: 1,
},
{
field: "last_pool_time",
name: "最近回收时间",
field_data_id: 1,
},
{
field: "recycle_days",
name: "距离回收天数",
field_data_id: 1,
},
{
field: "owner_user_id",
name: "负责人",
field_data_id: 1,
},
{
field: "owner_dep_id",
name: "负责人部门",
field_data_id: 1,
},
{
field: "creator_user_id",
name: "创建人",
field_data_id: 1,
},
{
field: "create_time",
name: "创建时间",
field_data_id: 1,
},
{
field: "update_time",
name: "更新时间",
field_data_id: 1,
},
],
},
{
module_name: "联系人",
module_field: "contact",
module_content: [
{
field: "input_1646201281",
name: "身份证号",
field_data_id: 2,
},
{
field: "customer_id",
name: "相关客户",
field_data_id: 2,
},
{
field: "description",
name: "备注",
field_data_id: 2,
},
{
field: "address",
name: "地址",
field_data_id: 2,
},
{
field: "qq",
name: "QQ",
field_data_id: 2,
},
{
field: "wechat",
name: "微信",
field_data_id: 2,
},
{
field: "birthday",
name: "出生日期",
field_data_id: 2,
},
{
field: "sex",
name: "尊称",
field_data_id: 2,
},
{
field: "email",
name: "电子邮件",
field_data_id: 2,
},
{
field: "phone",
name: "座机",
field_data_id: 2,
},
{
field: "mobile",
name: "手机",
field_data_id: 2,
},
{
field: "post",
name: "职务",
field_data_id: 2,
},
{
field: "name",
name: "姓名",
field_data_id: 2,
},
{
field: "visible_user_ids",
name: "团队成员",
field_data_id: 2,
},
{
field: "owner_user_id",
name: "负责人",
field_data_id: 2,
},
{
field: "owner_dep_id",
name: "负责人部门",
field_data_id: 2,
},
{
field: "creator_user_id",
name: "创建人",
field_data_id: 2,
},
{
field: "create_time",
name: "创建时间",
field_data_id: 2,
},
{
field: "update_time",
name: "更新时间",
field_data_id: 2,
},
],
},
{
module_name: "商机",
module_field: "opportunity",
module_content: [
{
field: "cascader_1691116992",
name: "级联选择器",
field_data_id: 3,
},
{
field: "checkbox_1691024297",
name: "多选框组",
field_data_id: 3,
},
{
field: "selectcheckbox_1691024212",
name: "下拉多选框",
field_data_id: 3,
},
{
field: "address_1687674528",
name: "地址",
field_data_id: 3,
},
{
field: "storerole_c_id",
name: "店员管理",
field_data_id: 3,
},
{
field: "img_1608865197",
name: "图片",
field_data_id: 3,
},
{
field: "description",
name: "备注",
field_data_id: 3,
},
{
field: "level",
name: "商机级别",
field_data_id: 3,
},
{
field: "source",
name: "商机来源",
field_data_id: 3,
},
{
field: "group_id",
name: "商机流程组",
field_data_id: 3,
},
{
field: "price",
name: "商机金额(元)",
field_data_id: 3,
},
{
field: "expected_date",
name: "预计成交日期",
field_data_id: 3,
},
{
field: "name",
name: "商机名称",
field_data_id: 3,
},
{
field: "customer_id",
name: "客户",
field_data_id: 3,
},
{
field: "number",
name: "商机编号",
field_data_id: 3,
},
{
field: "process_id",
name: "商机流程",
field_data_id: 3,
},
{
field: "visible_user_ids",
name: "团队成员",
field_data_id: 3,
},
{
field: "state",
name: "结束状态",
field_data_id: 3,
},
{
field: "state_reason",
name: "结束理由",
field_data_id: 3,
},
{
field: "state_remark",
name: "结束备注",
field_data_id: 3,
},
{
field: "next_contact_time",
name: "下次联系时间",
field_data_id: 3,
},
{
field: "owner_user_id",
name: "负责人",
field_data_id: 3,
},
{
field: "owner_dep_id",
name: "负责人部门",
field_data_id: 3,
},
{
field: "creator_user_id",
name: "创建人",
field_data_id: 3,
},
{
field: "create_time",
name: "创建时间",
field_data_id: 3,
},
{
field: "update_time",
name: "更新时间",
field_data_id: 3,
},
],
},
{
module_name: "合同",
module_field: "contract",
module_content: [
{
field: "file_1742364830",
name: "合同附件",
field_data_id: 5,
},
{
field: "address_1687679485",
name: "地址",
field_data_id: 5,
},
{
field: "quotation_id",
name: "报价单",
field_data_id: 5,
},
{
field: "product_price",
name: "产品总金额(元)",
field_data_id: 5,
},
{
field: "contact_email",
name: "联系人邮箱",
field_data_id: 5,
},
{
field: "contact_mobile",
name: "联系人手机",
field_data_id: 5,
},
{
field: "contact_id",
name: "联系人",
field_data_id: 5,
},
{
field: "renew",
name: "合同类型",
field_data_id: 5,
},
{
field: "end_time",
name: "合同到期时间",
field_data_id: 5,
},
{
field: "start_time",
name: "合同生效时间",
field_data_id: 5,
},
{
field: "signing_time",
name: "签约时间",
field_data_id: 5,
},
{
field: "price",
name: "合同金额(元)",
field_data_id: 5,
},
{
field: "opportunity_id",
name: "来源商机",
field_data_id: 5,
},
{
field: "customer_id",
name: "来源客户",
field_data_id: 5,
},
{
field: "name",
name: "合同名称",
field_data_id: 5,
},
{
field: "number",
name: "合同编号",
field_data_id: 5,
},
{
field: "contract_money_dx",
name: "合同金额(大写)",
field_data_id: 5,
},
{
field: "payment_money",
name: "已回/剩余(元)",
field_data_id: 5,
},
{
field: "payment_status",
name: "回款状态",
field_data_id: 5,
},
{
field: "renew_id",
name: "续约合同",
field_data_id: 5,
},
{
field: "discount",
name: "总折扣（%）",
field_data_id: 5,
},
{
field: "state",
name: "合同状态",
field_data_id: 5,
},
{
field: "approval_state",
name: "审核状态",
field_data_id: 5,
},
{
field: "void_time",
name: "作废时间",
field_data_id: 5,
},
{
field: "void_reason",
name: "作废原因",
field_data_id: 5,
},
{
field: "channel_id",
name: "渠道商",
field_data_id: 5,
},
{
field: "channel_user_id",
name: "渠道负责人",
field_data_id: 5,
},
{
field: "out_status",
name: "出库状态",
field_data_id: 5,
},
{
field: "owner_user_id",
name: "负责人",
field_data_id: 5,
},
{
field: "owner_dep_id",
name: "负责人部门",
field_data_id: 5,
},
{
field: "creator_user_id",
name: "创建人",
field_data_id: 5,
},
{
field: "create_time",
name: "创建时间",
field_data_id: 5,
},
{
field: "update_time",
name: "更新时间",
field_data_id: 5,
},
],
},
];
const option = {
width: 80,
height: 80,
data: [
{
id: "5fd93fe2-0953-4f91-82db-b77643ef5ac8",
renderList: [
{
componentName: "textContainer",
attrsJson: [
{
label: "字段",
type: "FORMITEM",
prop: "prop",
defaultValue: "KevinCharlesTaylor",
componentName: "InputOrSelectData",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "宽",
type: "STYLE",
prop: "w",
defaultValue: 80,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "高",
type: "STYLE",
prop: "h",
defaultValue: 20,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "x轴",
type: "STYLE",
prop: "x",
defaultValue: 222,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "y轴",
type: "STYLE",
prop: "y",
defaultValue: 269,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
type: "COMPONENT",
label: "默认值",
prop: "defaultValue",
defaultValue: "请输入文字",
componentName: "ElInput",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: false,
message: "",
trigger: "change",
},
],
},
{
type: "STYLE",
label: "文本颜色",
prop: "color",
defaultValue: "#000",
componentName: "ElColorPicker",
attrs: {},
},
{
label: "对齐方式",
prop: "textAlign",
type: "STYLE",
defaultValue: "left",
componentName: "ElSelect",
attrs: {
placeholder: "请选择类型",
clearable: true,
},
rules: [
{
required: true,
message: "类型不能为空",
trigger: "change",
},
],
children: [
{
componentName: "ElOption",
value: "center",
label: "居中",
},
{
componentName: "ElOption",
value: "left",
label: "左对齐",
},
{
componentName: "ElOption",
value: "right",
label: "右对齐",
},
],
},
{
label: "字体类型",
prop: "fontFamily",
type: "STYLE",
defaultValue: "雅黑",
componentName: "ElSelect",
attrs: {
placeholder: "请选择类型",
clearable: true,
},
rules: [
{
required: true,
message: "类型不能为空",
trigger: "change",
},
],
children: [
{
componentName: "ElOption",
value: "宋体",
label: "宋体",
},
{
componentName: "ElOption",
label: "雅黑",
value: "雅黑",
},
{
componentName: "ElOption",
label: "Arial",
value: "Arial",
},
],
},
{
label: "字体大小",
type: "STYLE",
prop: "fontSize",
defaultValue: 12,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
],
title: "文本",
prop: "KevinCharlesTaylor",
attrs: {
defaultValue: "请输入文字",
},
type: "COMPONENT",
styles: {
resizable: true,
active: false,
x: 222,
y: 269,
draggable: true,
w: 80,
h: 20,
color: "#000",
textAlign: "left",
fontFamily: "雅黑",
fontSize: 12,
},
id: "31eb4350-c49e-4469-a500-0ad13386f7d0",
pageIndex: 0,
},
{
componentName: "TwoCodeContainer",
attrsJson: [
{
label: "字段",
type: "FORMITEM",
prop: "prop",
defaultValue: "MariaJamesJones",
componentName: "InputOrSelectData",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "宽",
type: "STYLE",
prop: "w",
defaultValue: 80,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "高",
type: "STYLE",
prop: "h",
defaultValue: 80,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "x轴",
type: "STYLE",
prop: "x",
defaultValue: 222,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "y轴",
type: "STYLE",
prop: "y",
defaultValue: 9,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
type: "COMPONENT",
label: "尺寸大小",
prop: "size",
defaultValue: 100,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: false,
message: "",
trigger: "change",
},
],
},
{
type: "COMPONENT",
label: "icon",
prop: "logoSrc",
defaultValue: null,
componentName: "uploadImg",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: false,
message: "",
trigger: "change",
},
],
},
{
type: "COMPONENT",
label: "icon网络地址",
prop: "logoSrc",
defaultValue: null,
componentName: "ElInput",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: false,
message: "",
trigger: " change",
},
],
},
{
type: "COMPONENT",
label: "编码内容",
prop: "defaultValue",
defaultValue:
"https://qz.io/assets/img/clients/pakaneo.63268af2.webp",
componentName: "ElInput",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: false,
message: "",
trigger: "change",
},
],
},
{
type: "COMPONENT",
label: "背景色",
prop: "backgroundColor",
defaultValue: "#FFF",
componentName: "ElColorPicker",
attrs: {},
},
{
type: "COMPONENT",
label: "容错级别 0-3",
prop: "correctLevel",
defaultValue: 1,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
min: 0,
max: 3,
},
rules: [
{
required: false,
message: "",
trigger: "change",
},
],
},
],
title: "二维码",
attrs: {
size: 100,
defaultValue:
"https://qz.io/assets/img/clients/pakaneo.63268af2.webp",
backgroundColor: "#FFF",
correctLevel: 1,
},
prop: "MariaJamesJones",
styles: {
x: 222,
y: 9,
resizable: true,
draggable: true,
w: 80,
h: 80,
active: true,
},
id: "f24cf0c9-4245-4c0d-89d4-3ee3a7f61fcc",
pageIndex: 0,
},
],
},
{
id: "07318886-ab4d-47e9-b721-b9857f680b51",
renderList: [
{
title: "条形码",
prop: "ElizabethRobertDavis",
componentName: "BarCodeContainer",
attrsJson: [
{
label: "字段",
type: "FORMITEM",
prop: "prop",
defaultValue: "ElizabethRobertDavis",
componentName: "InputOrSelectData",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "宽",
type: "STYLE",
prop: "w",
defaultValue: 200,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "高",
type: "STYLE",
prop: "h",
defaultValue: 60,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "x轴",
type: "STYLE",
prop: "x",
defaultValue: 102,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "y轴",
type: "STYLE",
prop: "y",
defaultValue: 536,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
type: "COMPONENT",
label: "条形码格式",
prop: "format",
defaultValue: null,
componentName: "ElInput",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: false,
message: "",
trigger: "change",
},
],
},
{
type: "COMPONENT",
label: "编码内容",
prop: "defaultValue",
defaultValue: "123456789",
componentName: "ElInput",
attrs: {
placeholder: "请输入",
},
rules: [
{
required: false,
message: "",
trigger: "change",
},
],
},
{
type: "COMPONENT",
label: "线颜色",
prop: "lineColor",
defaultValue: "#000",
componentName: "ElColorPicker",
attrs: {},
},
{
label: "是否显示值",
prop: "displayValue",
type: "COMPONENT",
defaultValue: true,
componentName: "ElSwitch",
attrs: {},
},
{
label: "条形码宽度",
type: "COMPONENT",
prop: "width",
defaultValue: 2,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "条形码高度",
type: "COMPONENT",
prop: "height",
defaultValue: 30,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "外边距",
type: "COMPONENT",
prop: "margin",
defaultValue: 10,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
{
label: "字体大小",
type: "COMPONENT",
prop: "fontSize",
defaultValue: 12,
componentName: "ElInputNumber",
attrs: {
placeholder: "请输入",
controlsPosition: "right",
min: 0,
},
rules: [
{
required: true,
message: "不能为空",
trigger: "change",
},
],
},
],
attrs: {
defaultValue: "123456789",
lineColor: "#000",
displayValue: true,
width: 2,
height: 30,
margin: 10,
fontSize: 12,
},
styles: {
x: 102,
y: 536,
resizable: false,
draggable: true,
w: 200,
h: 60,
active: false,
},
id: "f81ba0d4-a131-4f77-bbf7-884b36fdb116",
pageIndex: 1,
},
],
},
],
qzOption: {
size: {
width: 80,
height: 80,
},
units: "mm",
},
page: 2,
dataSource: "Parameter",
model: [
{
KevinCharlesTaylor: "1111 ",
MariaJamesJones: "https://qz.io/assets/img/clients/pakaneo.63268af2.webp",
ElizabethRobertDavis: "123456789",
},
{
KevinCharlesTaylor: "请输入文字",
MariaJamesJones: "https://qz.io/assets/img/clients/pakaneo.63268af2.webp",
ElizabethRobertDavis: "123456789",
},
],
};
</script>
<style>
.h100 {
height: 100%;
width: 100%;
}
</style>
"vue3-sketch-ruler": "^2.0.9"
Sketch尺子
提示
如果无法安装请切换npm官方镜像 npm config set registry https://registry.npmjs.org/ 同步yarn 淘宝镜像需要时间 如果是历史版本就没问题
- 提示esBuild.exe 建议重启项目就没问题了 或者删除原来的node_modules