violet/web-view-antd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 增加pdf拆分界面

Browse Source
This commit is contained in:
zhouc 2025-03-04 15:52:07 +08:00
parent 75b6789432
commit 756c2ff7fc
2 changed files with 242 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
src/views/pdf/splitbypage/index.vue Normal file
View 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
View 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>