<div class="p-event" id="print" style="border: 1px solid red; box-sizing: border-box; height: 500px; width: 900px;">
<template v-for="(item, index) in list">
<vue-draggable-resizable
parent=".p-event"
:grid="[10,10]"
:x="item.x"
:y="item.y"
:left="form.paddingLeft"
:key="item+index"
:parent="true"
w="auto"
h="auto"
@dragging="onDrag"
@resizing="onResize">
<p :style="{ fontSize: item.fontSize, color: item.color, lineHeight: item.lineHeight }">{{ item.name }}</p>
</vue-draggable-resizable>
</template>
class=“p-event”， parent=".p-event"， :parent=“true” 是为了设置父元素，且拖拽区域不能超过父元素。
x与y采用随机数，是为了初次进入，不会多个数据不会挤在左上角。
3、打印指定区域内内容
/** 打印方法 */
doPrint() {
const subOutputRankPrint = document.getElementById('print')
const newContent = subOutputRankPrint.innerHTML
const oldContent = document.body.innerHTML
document.body.innerHTML = newContent
window.print()
window.location.reload()
document.body.innerHTML = oldContent
return false
去掉页头页尾
<style media="print" scoped>
/** 去掉页头和页尾 */
@page {
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
</style> 整体代码如下：
<template>
<div style="padding:30px;">
<h1>拖拽</h1>
<el-button @click="doPrint">打印</el-button>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="字号设置">
<el-row :gutter="20">
<el-col :span="4">
<el-select v-model="form.name" @change="changeName();changeVal()">
<el-option v-for="(item,index) in list" :label="item.label" :key="index+item.label" :value="item.name"></el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="form.selectVal" @change="changeHeight">
<el-option label="字体大小" value="fontSize"></el-option>
<el-option label="行高设置" key="index+item.value" value="lineHeight"></el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-select v-model="form.fontSize" @change="changeVal">
<el-option v-for="(item,index) in sizeList" :key="index+item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-color-picker v-model="form.color" @change="changeVal"></el-color-picker>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="p-event" id="print" style="border: 1px solid red; box-sizing: border-box; height: 500px; width: 900px;">
<template v-for="(item, index) in list">
<vue-draggable-resizable
parent=".p-event"
:grid="[10,10]"
:x="item.x"
:y="item.y"
:left="form.paddingLeft"
:key="item+index"
:parent="true"
w="auto"
h="auto"
@dragging="onDrag"
@resizing="onResize">
<p :style="{ fontSize: item.fontSize, color: item.color, lineHeight: item.lineHeight }">{{ item.name }}</p>
</vue-draggable-resizable>
</template>
</template>
<script>
export default {
data: function() {
return {
width: 0,
height: 0,
x: 0,
y: 0,
form: {
name: '',
fontSize: '',
selectVal: '',
color: '',
paddingTop: 20,
paddingBottom: 0,
paddingLeft: 0,
paddingRight: 0
sizeList: [], // 字体号数组
apiArr: [ // 后期从接口中获取name集合
{ name: '公司名称' },
{ name: '抬头' },
{ name: '公司简介' }
list: [] // apiArr带上所有属性的集合
mounted() {
// 字号数组获取
for (let i = 12; i <= 48; i++) {
this.sizeList.push({ label: `${i}px`, value: `${i}px` })
// 网格上的数据获取
for (const it of this.apiArr) {
this.list.push({
name: it.name, // 表名对应的值
label: it.name, // 表名
fontSize: '16px', // 默认字体
lineHeight: 'normal', // 默认行高
color: '#000000', // 默认颜色
x: Math.floor(Math.random() * (800 - 10)) + 10, // x默认值
y: Math.floor(Math.random() * (450 - 10)) + 10 // y 默认值
methods: {
/** 打印方法 */
doPrint() {
const subOutputRankPrint = document.getElementById('print')
const newContent = subOutputRankPrint.innerHTML
const oldContent = document.body.innerHTML
document.body.innerHTML = newContent
window.print()
window.location.reload()
document.body.innerHTML = oldContent
return false
onResize: function(x, y, width, height) {
this.x = x
this.y = y
this.width = width
this.height = height
onDrag: function(x, y) {
this.x = x
this.y = y
/** 选择列下拉框 */
changeName() {
this.form.fontSize = ''
this.form.color = ''
changeHeight() {
this.form.fontSize = ''
/** 下拉框改变的时候进行动态设置样式 */
changeVal() {
if (this.form.name && this.form.fontSize && this.form.selectVal === 'fontSize') { this.commonMethod('fontSize') }
if (this.form.name && this.form.fontSize && this.form.selectVal === 'lineHeight') { this.commonMethod('lineHeight') }
if (this.form.name && this.form.color) { this.commonMethod('color') }
/** 公共的设置样式方法 */
commonMethod(val) {
for (const it of this.list) {
if (it.label === this.form.name) {
if (val === 'lineHeight') {
it[val] = this.form.fontSize
} else {
it[val] = this.form[val]
</script>
<style scoped>
/** 这里vdr的样式设置是为了当没有选中目标文字时，去掉默认的虚线框，只有选中的时候才有虚线框 */
.vdr {
border: none;
.handle, .active.vdr {
border: 1px dashed #000;
#print {
position: relative;
/** 网格样式 */
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px, linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px) 0% 0% / 10px 10px;
</style>
<style media="print" scoped>
/** 去掉页头和页尾 */
@page {
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
</style> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
vue 懒加载组件chunk相对路径混乱问题及解决 2022-04-04 vue实现动态表单动态渲染组件的方式(1) 2022-04-04 elementUI中MENU菜单踩坑 2022-04-04 vue使用echarts实现立体柱形图 2022-04-04 vue实现指定区域自由拖拽、打印功能 2022-04-04 vue Draggable实现拖动改变顺序 2022-04-04 vue使用vuedraggable实现嵌套多层拖拽排序功能 2022-04-04 vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决 2022-04-04 美国设下计谋,用娘炮文化重塑日本,已影响至中国 2021-11-19 时空伴随者是什么意思?时空伴随者介绍 2021-11-09 工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终 2021-11-05 2022年放假安排出炉：五一连休5天 2022年所有节日一览表 2021-10-26 电脑版 - 返回首页
2006-2023 脚本之家 JB51.Net , All Rights Reserved.
