feat: 增加pdf拆分界面
This commit is contained in:
parent
75b6789432
commit
756c2ff7fc
124
src/views/pdf/splitbypage/index.vue
Normal file
124
src/views/pdf/splitbypage/index.vue
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { InboxOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import type { UploadChangeParam } from 'ant-design-vue'
|
||||||
|
|
||||||
|
const fileList_left = ref([])
|
||||||
|
function handleChange_left(info: UploadChangeParam) {
|
||||||
|
const status = info.file.status
|
||||||
|
if (status !== 'uploading')
|
||||||
|
console.log(info.file, info.fileList)
|
||||||
|
|
||||||
|
if (status === 'done') {
|
||||||
|
info.fileList.find(item => item.url)
|
||||||
|
message.success(`${info.file.name} file uploaded successfully.`)
|
||||||
|
}
|
||||||
|
else if (status === 'error') {
|
||||||
|
message.error(`${info.file.name} file upload failed.`)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDrop_left(e: DragEvent) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
|
||||||
|
const fileList = ref([])
|
||||||
|
function handleChange(info: UploadChangeParam) {
|
||||||
|
const status = info.file.status
|
||||||
|
if (status !== 'uploading')
|
||||||
|
console.log(info.file, info.fileList)
|
||||||
|
|
||||||
|
if (status === 'done')
|
||||||
|
message.success(`${info.file.name} file uploaded successfully.`)
|
||||||
|
else if (status === 'error')
|
||||||
|
message.error(`${info.file.name} file upload failed.`)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDrop(e: DragEvent) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<div class="split_style">
|
||||||
|
拆分前文件
|
||||||
|
</div>
|
||||||
|
<div class="style_left">
|
||||||
|
<a-upload-dragger
|
||||||
|
v-model:fileList="fileList_left"
|
||||||
|
name="file"
|
||||||
|
:multiple="true"
|
||||||
|
action="http://localhost:85/dev-api/infra/file/upload"
|
||||||
|
@change="handleChange_left"
|
||||||
|
@drop="handleDrop_left"
|
||||||
|
>
|
||||||
|
<!-- :headers="{ Authorization: 'Bearer 4386f0392a6642cead5f419db84bd83b' }" -->
|
||||||
|
<p class="ant-upload-drag-icon">
|
||||||
|
<inbox-outlined />
|
||||||
|
</p>
|
||||||
|
<p class="ant-upload-text">
|
||||||
|
单击或拖动文件到此区域进行上传,Click or drag file to this area
|
||||||
|
to upload
|
||||||
|
</p>
|
||||||
|
<!-- <p class="ant-upload-hint"> -->
|
||||||
|
<!-- Support for a single or bulk upload. Strictly prohibit from uploading company data or -->
|
||||||
|
<!-- other -->
|
||||||
|
<!-- band files -->
|
||||||
|
<!-- </p> -->
|
||||||
|
</a-upload-dragger>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<div class="split_style">
|
||||||
|
拆分后文件
|
||||||
|
</div>
|
||||||
|
<div class="style_right">
|
||||||
|
<a-upload-dragger
|
||||||
|
v-model:fileList="fileList"
|
||||||
|
name="file"
|
||||||
|
:multiple="true"
|
||||||
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||||
|
@change="handleChange"
|
||||||
|
@drop="handleDrop"
|
||||||
|
>
|
||||||
|
<p class="ant-upload-drag-icon">
|
||||||
|
<inbox-outlined />
|
||||||
|
</p>
|
||||||
|
<p class="ant-upload-text">
|
||||||
|
Click or drag file to this area to upload
|
||||||
|
</p>
|
||||||
|
<p class="ant-upload-hint">
|
||||||
|
Support for a single or bulk upload. Strictly prohibit from uploading company data or
|
||||||
|
other
|
||||||
|
band files
|
||||||
|
</p>
|
||||||
|
</a-upload-dragger>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.split_style {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
//margin-right: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #f06;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style_left {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style_right {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
118
src/views/pdf/turnimages/index.vue
Normal file
118
src/views/pdf/turnimages/index.vue
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { InboxOutlined } from '@ant-design/icons-vue'
|
||||||
|
import { message } from 'ant-design-vue'
|
||||||
|
import type { UploadChangeParam } from 'ant-design-vue'
|
||||||
|
|
||||||
|
const fileList_left = ref([])
|
||||||
|
function handleChange_left(info: UploadChangeParam) {
|
||||||
|
const status = info.file.status
|
||||||
|
if (status !== 'uploading')
|
||||||
|
console.log(info.file, info.fileList)
|
||||||
|
|
||||||
|
if (status === 'done')
|
||||||
|
message.success(`${info.file.name} file uploaded successfully.`)
|
||||||
|
else if (status === 'error')
|
||||||
|
message.error(`${info.file.name} file upload failed.`)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDrop_left(e: DragEvent) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
const fileList = ref([])
|
||||||
|
function handleChange(info: UploadChangeParam) {
|
||||||
|
const status = info.file.status
|
||||||
|
if (status !== 'uploading')
|
||||||
|
console.log(info.file, info.fileList)
|
||||||
|
|
||||||
|
if (status === 'done')
|
||||||
|
message.success(`${info.file.name} file uploaded successfully.`)
|
||||||
|
else if (status === 'error')
|
||||||
|
message.error(`${info.file.name} file upload failed.`)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleDrop(e: DragEvent) {
|
||||||
|
console.log(e)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<a-row>
|
||||||
|
<a-col :span="12">
|
||||||
|
<div class="split_style">
|
||||||
|
拆分前文件
|
||||||
|
</div>
|
||||||
|
<div class="style_left">
|
||||||
|
<a-upload-dragger
|
||||||
|
v-model:fileList="fileList_left"
|
||||||
|
name="file"
|
||||||
|
:multiple="true"
|
||||||
|
action="http://localhost:85/dev-api/infra/file/upload"
|
||||||
|
@change="handleChange_left"
|
||||||
|
@drop="handleDrop_left"
|
||||||
|
>
|
||||||
|
<p class="ant-upload-drag-icon">
|
||||||
|
<inbox-outlined />
|
||||||
|
</p>
|
||||||
|
<p class="ant-upload-text">
|
||||||
|
单击或拖动文件到此区域进行上传,Click or drag file to this area to upload
|
||||||
|
</p>
|
||||||
|
<!-- <p class="ant-upload-hint"> -->
|
||||||
|
<!-- Support for a single or bulk upload. Strictly prohibit from uploading company data or -->
|
||||||
|
<!-- other -->
|
||||||
|
<!-- band files -->
|
||||||
|
<!-- </p> -->
|
||||||
|
</a-upload-dragger>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<div class="split_style">
|
||||||
|
拆分后图片
|
||||||
|
</div>
|
||||||
|
<div class="style_right">
|
||||||
|
<a-upload-dragger
|
||||||
|
v-model:fileList="fileList"
|
||||||
|
name="file"
|
||||||
|
:multiple="true"
|
||||||
|
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
|
||||||
|
@change="handleChange"
|
||||||
|
@drop="handleDrop"
|
||||||
|
>
|
||||||
|
<p class="ant-upload-drag-icon">
|
||||||
|
<inbox-outlined />
|
||||||
|
</p>
|
||||||
|
<p class="ant-upload-text">
|
||||||
|
Click or drag file to this area to upload
|
||||||
|
</p>
|
||||||
|
<p class="ant-upload-hint">
|
||||||
|
Support for a single or bulk upload. Strictly prohibit from uploading company data or
|
||||||
|
other
|
||||||
|
band files
|
||||||
|
</p>
|
||||||
|
</a-upload-dragger>
|
||||||
|
</div>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
.split_style {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
//margin-right: 30px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #f06;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style_left {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style_right {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user