html
复制代码
<template>
<div class="body">
<div class="stations" v-if="stations"></div>
<div style="height: 60px"></div>
<div class="content">
<div class="title">
<div @click="tabChange('pdf2word')" id="div1">
<img :src="pdf2wordUrl" alt="Image">
pdf转换Word
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2excel')" id="div2">
<img :src="pdf2excelUrl" alt="Image">
pdf转换Excel
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2img')" id="div3">
<img :src="pdf2imgUrl" alt="Image">
pdf转换图片
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2text')" id="div4">
<img :src="pdf2textUrl" alt="Image">
pdf转换文本
<a-divider dashed/>
</div>
<div @click="tabChange('pdf2html')" id="div5">
<img :src="pdf2htmlUrl" alt="Image">
pdf转HTML
<a-divider dashed/>
</div>
<div @click="tabChange('img2word')" id="div6">
<img :src="img2wordUrl" alt="Image">
图片转word
<a-divider dashed/>
</div>
<div @click="tabChange('img2excel')" id="div7">
<img :src="img2excelUrl" alt="Image">
图片转excel
<a-divider dashed/>
</div>
<div @click="tabChange('img2pdf')" id="div8">
<img :src="img2pdfUrl" alt="Image">
图片转pdf
<a-divider dashed/>
</div>
</div>
<div @dragenter="dragEnter"
@dragleave="dragLeave"
@dragover="dragOver"
@drop="dropFile"
class="dropzone"
>
将文件拖到此处，或点击选择文件按钮，小于100MB，请不要上传电子书等存在侵权的资源！
</div>
<div class="text-pdf">
{{convertTitle}}
</div>
<div class="text-pdf-file">
<input @change="handleFileUpload" class="button-add" type="file">
<a-button :block="true" @click="startProcess()" class="button-pro" style="text-align: center"
type="primary">
开始处理
</a-button>
</div>
<div class="text-status">
{{processStatus}}
</div>
<!-- <input @change="selectFile" type="file"/>-->
<div :key="file.name" v-for="file in convertFiles">
文件名：{{ file.name }}，大小：{{ file.size }}字节
<!-- <button @click="downloadFile(file)">下载</button>-->
</div>
</div>
</div>
</template>
<script>
import PermissionModal from './modules/PermissionModal'
import GlobalFooter from '@/components/page/GlobalFooter'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import PermissionDataRuleList from './PermissionDataRuleList'
import JEllipsis from '@/components/jeecg/JEllipsis'
import http from '@api/url'
import imgOn from '../../assets/on.png'
import imgOff from '../../assets/off.png'
export default {
name: 'pdf2excel',
mixins: [JeecgListMixin],
components: {
PermissionDataRuleList,
PermissionModal,
GlobalFooter,
JEllipsis
},
data() {
return {
convertFiles: [],
playTimer: null,
processTimer: null,
stations: false,
pdf2wordUrl: imgOff,
pdf2excelUrl: imgOff,
pdf2imgUrl: imgOff,
pdf2textUrl: imgOff,
img2wordUrl: imgOff,
img2excelUrl: imgOff,
img2pdfUrl: imgOff,
pdf2htmlUrl: imgOff,
aLiModeData: {
'url': '',
},
aLiDocFind: {
'id': '',
},
convertTitle: 'pdf 转换 word',
processStatus: '准备处理',
processType: 'pdf2word',
files: [],
dropzoneActive: false,
turnOn:false,
processStep:0
}
},
mounted() {
// 添加滚动事件监听
window.addEventListener('scroll', this.handleScroll)
},
beforeDestroy() {
// 移除滚动事件监听
window.removeEventListener('scroll', this.handleScroll)
},
methods: {
/**
* 鼠标滚动事件
* @param event 页面事件
*/
handleScroll() {
// 处理滚动事件
if (window.scrollY >= 20) {
this.stations = true
} else {
this.stations = false
}
},
/**
* 上传文件事件
* @param event 页面事件
*/
handleFileUpload(event) {
this.convertFiles = [];
this.convertFiles.push (event.target.files[0])
},
/**
* 检查上传文件类型
* @param file 文件 type 处理类型
*/
fileCheck(file, type) {
let allowedExtensions = null
if (type == 'pdf2word' || type == 'pdf2excel' || type == 'pdf2img' || type == 'pdf2text' || type == 'pdf2html') {
allowedExtensions = ['pdf']
const extension = file.name.split('.').pop().toLowerCase()
if (allowedExtensions.includes(extension)) {
// 文件后缀符合要求
return false
} else {
alert('请上传有效的文件（ .pdf）')
return true
}
}
if (type == 'img2word' || type == 'img2excel' || type == 'img2pdf') {
allowedExtensions = ['jpg', 'png']
const extension = file.name.split('.').pop().toLowerCase()
if (allowedExtensions.includes(extension)) {
// 文件后缀符合要求
return false
} else {
alert('请上传有效的文件（ .jpg 或.png）')
return true
}
}
},
/**
* 开始处理向后台发送请求，处理页面选择装换类型对应
* @param void
*/
startCase() {
const formData = new FormData()
if(this.convertFiles[0].size>1024*1024*5){
alert("上传文件大小不超过5M!");
return;
}
formData.append('file', this.convertFiles[0])
http.post('/upload/file', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then((response) => {
// 处理响应
this.aLiModeData.url = response.data.url
switch (this.processType) {
case 'pdf2word':
this.pdfConvertToWord()
break
case 'pdf2excel':
this.pdfConvertToExcel()
break
case 'pdf2img':
this.pdfConvertToImage()
break
case 'pdf2text':
const formDataText = new FormData()
formDataText.append('url', this.aLiModeData.url)
this.pdfConvertToText(formDataText)
break
case 'img2word':
const formData = new FormData()
formData.append('url[]', this.aLiModeData.url)
this.imgConvertToWord(formData)
break
case 'img2excel':
const formDataExcle = new FormData()
formDataExcle.append('url[]', this.aLiModeData.url)
this.imgConvertToExcel(formDataExcle)
break
case 'img2pdf':
const formDataPdf = new FormData()
formDataPdf.append('url[]', this.aLiModeData.url)
this.imgConvertToPdf(formDataPdf)
break
case 'pdf2html':
const formDataHtml = new FormData()
formDataHtml.append('url[]', this.aLiModeData.url)
this.imgConvertToHtml(formDataHtml)
break
default:
console.log('默认处理')
}
})
.catch((error) => {
console.log(error)
})
},
/**
* 开始处理向后台发送请求，文件类型check文件类型不符合要求停止处理
* @param void
*/
startProcess() {
//没有选择tab页面转换方式弹窗提示
if(!this.turnOn ){
alert("请选择转换方式,点击页面中的 pdf转换Word,pdf装换Excel...！");
return;
}
if(this.convertFiles.length==0 ){
alert("请添加转换文件！");
return;
}
switch (this.processType) {
case 'pdf2word':
if (this.fileCheck(this.convertFiles[0], 'pdf2word')) {
return
}
break
case 'pdf2excel':
if (this.fileCheck(this.convertFiles[0], 'pdf2excel')) {
return
}
break
case 'pdf2img':
if (this.fileCheck(this.convertFiles[0], 'pdf2img')) {
return
}
break
case 'pdf2text':
if (this.fileCheck(this.convertFiles[0], 'pdf2text')) {
return
}
break
case 'img2word':
if (this.fileCheck(this.convertFiles[0], 'img2word')) {
return
}
break
case 'img2excel':
if (this.fileCheck(this.convertFiles[0], 'img2excel')) {
return
}
break
case 'img2pdf':
if (this.fileCheck(this.convertFiles[0], 'img2pdf')) {
return
}
break
case 'pdf2html':
if (this.fileCheck(this.convertFiles[0], 'pdf2html')) {
return
}
break
default:
console.log('默认处理')
}
this.startCase()
},
/**
* 调用阿里云请求 pdf装换为word
* @param void
*/
pdfConvertToWord() {
this.callHttpProcess('/concert/pdfToWord', this.aLiModeData);
},
/**
* 调用阿里云请求 pdf装换为excel
* @param void
*/
pdfConvertToExcel() {
this.callHttpProcess('/concert/pdfToExcel', this.aLiModeData);
},
/**
* 调用阿里云请求 pdf装换为图片
* @param void
*/
pdfConvertToImage() {
this.callHttpProcess('/concert/PdfToImage', this.aLiModeData);
},
/**
* 调用阿里云请求 pdf转换为text
* @param formData 表单数据
*/
pdfConvertToText(formData) {
//调用阿里云api开始处理
http.post('/concert/pdfToText', formData)
.then((response) => {
window.open(response.data.msg, '_blank')
})
.catch((error) => {
console.log(error)
})
},
/**
* 调用阿里云请求 图片转换为word
* @param formData 表单数据
*/
imgConvertToWord(formData) {
this.callHttpProcess('/concert/imageToWord', formData);
},
/**
* 调用阿里云请求 图片转换excel
* @param formData 表单数据
*/
imgConvertToExcel(formData) {
this.callHttpProcess('/concert/imageToExcel', formData);
},
/**
* 调用阿里云请求 图片转换pdf
* @param formData 表单数据
*/
imgConvertToPdf(formData) {
this.callHttpProcess('/concert/imageToPdf', formData);
},
/**
* 调用阿里云请求 图片转换html
* @param formData 表单数据
*/
imgConvertToHtml(formData) {
this.callHttpProcess('/concert/pdfToHtml', formData);
},
/**
* 发送http请求
* @param url 请求地址
* @param dataType 参数类型
*/
callHttpProcess(url,data){
//调用阿里云api开始处理
http.post(url, data)
.then((response) => {
this.aLiDocFind.id = response.data.data.body.Data.Id
this.getDocumentConvertResult()
})
.catch((error) => {
console.log(error)
})
},
/**
* 下载阿里云生成文档链接，如果链接位生成启动timer每4秒钟轮训请求
* @param void
*/
getDocumentConvertResult() {
http.post('/getConvertResult/GetDocumentConvertResult', this.aLiDocFind)
.then((response) => {
if (response.data.data.body.Completed.toString() == 'false') {
if (!this.playTimer) {
//执行需要定时重复执行的任务
this.playTimer = setInterval(() => {
this.getDocumentConvertResult()
}, 4000) // 每4秒钟执行一次
}
if (!this.processTimer) {
//执行需要定时重复执行的任务
this.processTimer = setInterval(() => {
this.processStatusValue();
}, 1000) // 每1秒钟执行一次
}
} else {
if (this.playTimer) {
window.clearInterval(this.playTimer)
this.playTimer = null
window.open(response.data.data.body.Data[0].Url, '_blank')
}
if (this.processTimer) {
window.clearInterval(this.processTimer)
this.processTimer = null
this.processStatus = "处理完成"
}
}
})
.catch((error) => {
console.log(error)
})
},
/**
* 切换处理状态动态切换处理状态
* @param void
*/
processStatusValue(){
this.processStep +=1;
switch (this.processStep) {
case 1:
this.processStatus ="处理中." ;
break;
case 2:
this.processStatus ="处理中.." ;
break;
case 3:
this.processStatus ="处理中..." ;
break;
case 4:
this.processStatus ="处理中...." ;
break;
case 5:
this.processStatus ="处理中....." ;
break;
case 6:
this.processStatus ="处理中......" ;
this.processStep= 0;
break;
default:
console.log("处理完成");
}
},
/**
* 点击tab标签处理中文字切换，处理类型也切换
* @param void
*/
tabChange(type) {
if (type == 'pdf2word') {
this.convertTitle = 'pdf 转换 word'
this.processType = 'pdf2word'
this.turnOff()
this.pdf2wordUrl = imgOn
this.turnOn = true;
}
if (type == 'pdf2excel') {
this.convertTitle = 'pdf 转换 excel'
this.processType = 'pdf2excel'
this.turnOff()
this.pdf2excelUrl = imgOn
this.turnOn = true;
}
if (type == 'pdf2img') {
this.convertTitle = 'pdf 转换 图片'
this.processType = 'pdf2img'
this.turnOff()
this.pdf2imgUrl = imgOn
this.turnOn = true;
}
if (type == 'pdf2text') {
this.convertTitle = 'pdf 转换 文本'
this.processType = 'pdf2text'
this.turnOff()
this.pdf2textUrl = imgOn
this.turnOn = true;
}
if (type == 'img2word') {
this.convertTitle = '图片 转换 word'
this.processType = 'img2word'
this.turnOff()
this.img2wordUrl = imgOn
this.turnOn = true;
}
if (type == 'img2excel') {
this.convertTitle = '图片 转换 excel'
this.processType = 'img2excel'
this.turnOff()
this.img2excelUrl = imgOn
this.turnOn = true;
}
if (type == 'img2pdf') {
this.convertTitle = '图片 转换 pdf'
this.processType = 'img2pdf'
this.turnOff()
this.img2pdfUrl = imgOn
this.turnOn = true;
}
if (type == 'pdf2html') {
this.convertTitle = '图片 转换 html'
this.processType = 'pdf2html'
this.turnOff()
this.pdf2htmlUrl = imgOn
this.turnOn = true;
}
},
/**
* 关闭其他tab页背景颜色，显示为黑白
* @param void
*/
turnOff() {
this.pdf2wordUrl = imgOff
this.pdf2excelUrl = imgOff
this.pdf2imgUrl = imgOff
this.pdf2textUrl = imgOff
this.img2wordUrl = imgOff
this.img2excelUrl = imgOff
this.img2pdfUrl = imgOff
this.pdf2htmlUrl = imgOff
},
/**
* 处理拖拽区域的拖入事件
* @param {Event} event - 拖入事件对象
*/
dragEnter(event) {
event.preventDefault()
this.dropzoneActive = true
},
/**
* 处理拖拽区域的拖离事件
* @param {Event} event - 拖离事件对象
*/
dragLeave(event) {
event.preventDefault()
this.dropzoneActive = false
},
/**
* 处理拖拽区域的拖放事件
* @param {Event} event - 拖放事件对象
*/
dragOver(event) {
event.preventDefault()
},
/**
* 处理文件的拖放上传
* @param {Event} event - 拖放事件对象
*/
dropFile(event) {
event.preventDefault()
this.dropzoneActive = false
const files = event.dataTransfer.files
this.handleFiles(files)
},
/**
* 处理选择文件按钮的上传事件
* @param {Event} event - 选择文件事件对象
*/
selectFile(event) {
const files = event.target.files
this.handleFiles(files)
},
/**
* 处理上传的文件列表
* @param {FileList} files - 文件列表
*/
handleFiles(files) {
//多文件上传
// for (let i = 0; i < files.length; i++) {
// const file = files[i]
// this.convertFiles.push(file)
// // 在这里可以执行文件上传的相关操作
// }
this.convertFiles = [];
//单文件上传
this.convertFiles.push(files[0]);
},
/**
* 下载文件
* @param {File} file - 文件对象
*/
downloadFile(file) {
const url = URL.createObjectURL(file)
const link = document.createElement('a')
link.href = url
link.download = file.name
link.click()
URL.revokeObjectURL(url)
}
}
}
</script>
<style lang="less" scoped>
.stations {
width: 100%;
height: 110px;
position: fixed;
top: 0;
left: 0;
z-index: 8;
background: url(../../assets/imgs/home_backCopy.png) no-repeat 100%;
background-size: 100%;
}
.content {
width: 2000px;
border-radius: 10px;
opacity: 1;
background: rgba(255, 255, 255, 0.5);
box-sizing: border-box;
border: 1px solid #FFFFFF;
margin: auto;
padding: 30px;
.title {
font-family: 思源黑体;
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: 0em;
color: #3D3D3D;
.titleDivider {
margin-top: 12px;
margin-bottom: 1px;
width: 100%;
height: 4.12px;
opacity: 1;
background: #22e2ff;
.titleItem {
display: flex;
}
}
}
#div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8 {
display: inline-block;
}
.text-pdf {
margin: 60px auto 0 auto;
font-size: 70px;
text-align: center;
display: block;
}
.text-status {
margin: 60px auto 0 auto;
font-size: 20px;
text-align: center;
display: block;
}
.button-add {
width: 500px;
height: 70px;
border-radius: 10px;
background: repeating-linear-gradient(to right, #3c75ff, #7f3cff);
}
.button-pro {
font-size: 40px;
width: 200px;
height: 70px;
margin-left: 120px;
border-radius: 10px;
background: repeating-linear-gradient(to right, #3c75ff, #7f3cff);
}
.text-pdf-file {
display: block;
margin: 60px auto 0 auto;
font-size: 40px;
text-align: center;
border: 0px solid #ccc;
color: #999;
}
.dropzone {
margin: 60px auto 0 auto;
width: 1300px;
height: 300px;
font-size: 30px;
border: 5px dashed #999;
}
}
.body {
z-index: 1;
position: relative;
}
</style>