vue2上传文档例子,pdf转换word例子

发布于:2024-07-11 ⋅ 阅读:(18) ⋅ 点赞:(0)
<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 &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2excel')" id="div2">
                    <img :src="pdf2excelUrl" alt="Image">
                    pdf转换Excel &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2img')" id="div3">
                    <img :src="pdf2imgUrl" alt="Image">
                    pdf转换图片 &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2text')" id="div4">
                    <img :src="pdf2textUrl" alt="Image">
                    pdf转换文本 &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('pdf2html')" id="div5">
                    <img :src="pdf2htmlUrl" alt="Image">
                    pdf转HTML &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('img2word')" id="div6">
                    <img :src="img2wordUrl" alt="Image">
                    图片转word &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('img2excel')" id="div7">
                    <img :src="img2excelUrl" alt="Image">
                    图片转excel &nbsp;&nbsp;&nbsp;
                    <a-divider dashed/>
                </div>
                <div @click="tabChange('img2pdf')" id="div8">
                    <img :src="img2pdfUrl" alt="Image">
                    图片转pdf &nbsp;&nbsp;&nbsp;
                    <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>