print-template-designer
print-template-designer copied to clipboard
Published
20 hours ago •
ROYIANS
ROYIANS
A vue2 component for design a page for print / 一个使用Vue2的组件，用于设计打印页面模板[ 可视化 拖拽 设计器 打印 ]。
print-template-designer
特性
- ⚡ 冲冲冲
Priview | 预览
仅个人研究学习用，并不保证可用性和健壮性
本项目为本人在学习可视化的学习探索项目，是个DEMO。写的也还不成熟，希望可以多多提建议。主要参考了文末几位dalao的项目和文章，在此基础上进行编写代码。主要是为了锻炼自己的代码能力和设计能力。
截图
安装
npm install print-template-designer --save
main.js
import store from './store'
import PrintTemplateDesigner from 'print-template-designer'
import 'print-template-designer/lib/print-template-designer.css'
import "remixicon/fonts/remixicon.css";
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'
Vue.use(VXETable)
Vue.use(PrintTemplateDesigner, { store })
// 需要全局设置$VXETable、$XModal用于注册渲染器等逻辑。
Vue.prototype.$VXETable = VXETable
Vue.prototype.$XModal = VXETable.modal
app.vue
<template>
<div>
<ptd-designer
ref="designer"
:pre-component-data="preComponentData"
:pre-page-config="prePageConfig"
:pre-data-source="preDataSource"
:pre-data-set="preDataSet"
:config="printTemplateConfig"
/>
<ptd-viewer
v-if="viewerVisible"
:visible.sync="viewerVisible"
:component-data="componentData"
:page-config="pageConfig"
:data-set="preDataSet"
:data-source="dataSource"
:need-toast="needToast"
:direct-export="directExport"
:file-name="fileName"
/>
</div>
</template>
<script>
export default {
name: 'APP',
// ......
}
</script>
插槽
- roy-designer-header-slot
标题栏右侧按钮区域插槽
- roy-designer-toolbar-slot
设计器上方工具栏插槽
必要外部依赖库
需要安装以下依赖才可使用:
- vue
- vuex
- remixicon
- vxe-table@legacy
- shepherd.js
- xe-utils
API
PTD-Designer Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| preComponentData | array | boolean |
false |
预设页面组件 |
| prePageConfig | object | boolean |
false |
预设页面全局配置 |
| preDataSource | array | boolean |
false |
预设数据源 |
| preDataSet | object | boolean |
false |
预设数据集 |
| config | object |
{} |
设计器配置，toolbarConfig: { buttons: 展示哪些按钮， showNightMode: 是否显示夜间模式切换按钮 } |
PTD-Viwer Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| visible | boolean |
true |
展示预览窗口 |
| componentData | array |
[] |
设计器中的组件数据 |
| pageConfig | object |
{} |
设计器中模板全局配置信息 |
| dataSource | array |
[] |
模板数据源配置信息 |
| dataSet | object |
{} |
数据集合，动态数据信息 |
| fileName | string |
'' |
导出PDF文件名，如果为空则为模板名 |
| directExport | boolean |
false |
打开窗口后直接进行渲染下载为PDF |
| needToast | string | boolean |
'建议导出PDF后再打印，更精准' |
导出PDF后页面提示信息，为false时不提示。否则提示传入的字符串内容 |
联系我
参考项目与文章
- report-designer
- printer-editor
- visual-drag-demo
- vue-email-editor
- slatejs 编辑器表格---选区
- slatejs 编辑器表格---合并单元格
- slatejs 编辑器表格---拆分单元格
- slatejs 编辑器表格---插入行
TODO
以下是待办列表，写一些接下来该项目要干的事：
-
[x] 基本功能
-
[x] 剔除ElementUI
-
[ ] BUG修复
-
[ ] 扩展功能（快捷键、撤销恢复等）
-
[ ] 调整部分组件的渲染逻辑
-
[ ] 重构 （同时支持Vue2和Vue3）
Statics
ROYIANS