1、页面标签这样写
<img :src="pdf2wordUrl" alt="Image">
2、data这样定义
pdf2wordUrl: imgOff,
3、import这样写
import imgOn from '../../assets/on.png'import imgOff from '../../assets/off.png'
4、转换代码
if (type == 'pdf2word') {this.convertTitle = 'pdf 转换 word'this.turnOff()this.pdf2wordUrl = imgOn}
完整代码参考
<template><div class="body"><div class="zhanwei" v-if="zhanwei"></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('pdf2ppt')" id="div3"><img :src="pdf2pptUrl" alt="Image">pdf转换PPT <a-divider dashed/></div><div @click="tabChange('pdf2jpg')" id="div4"><img :src="pdf2jpgUrl" 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('pdf2text')" id="div6"><img :src="pdf2textUrl" alt="Image">pdf转换Text <a-divider dashed/></div></div><div class="upload"></div><div class="text-pdf">{{convertTitle}}</div><div class="text-pdf-file">将文件拖到此处，或点击选择文件按钮，小于100MB，请不要上传电子书等存在侵权的资源！</div><div class="text-pdf-file"><input @change="handleFileUpload" class="button-add" type="file"><a-button :block="true" @click="pdf2word()" class="button-pro" style="text-align: center"type="primary">开始处理</a-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 {consoleText: '',file: null,timer: null,zhanwei: false,aLiModeData: {'model': 'wanx-v1','input': {'prompt': '一只奔跑的猫'},'parameters': {'style': '<sketch>','size': '1024*1024','n': 1,'seed': 42,'strength': 0.5,'ref_mode': 'repaint'}},otherModeData: {modelKey: '',prompt: '',sizeIndex: 0,styleIndex: 0,},userShow: true,image1: 'require(\'@/assets/on.png\')',image2: 'require(\'@/assets/off.png\')',currentImage: '',pdf2wordUrl: imgOff,pdf2excelUrl: imgOff,pdf2pptUrl: imgOff,pdf2jpgUrl: imgOff,pdf2htmlUrl: imgOff,pdf2textUrl: imgOff,aLiModeData: {'url': '',},aLiDocFind: {'id': '',},flag: '0',convertTitle: 'pdf 转换 word'}},mounted() {// 添加滚动事件监听window.addEventListener('scroll', this.handleScroll)this.currentImage = this.image1},beforeDestroy() {// 移除滚动事件监听window.removeEventListener('scroll', this.handleScroll)},methods: {handleScroll() {// 处理滚动事件if (window.scrollY >= 20) {this.zhanwei = true} else {this.zhanwei = false}},handleFileUpload(event) {this.file = event.target.files[0]},submitFile() {if (!this.file) {alert('请选择一个文件')return}const formData = new FormData()formData.append('file', this.file)},pdf2word() {const formData = new FormData()formData.append('file', this.file)http.post('/upload/file', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {console.log('pdf2word response data：', response)console.log('pdf2word response data：', response.data.url)// 处理响应this.aLiModeData.url = response.data.urlthis.pdf2wordByaliyunProcStepOne()}).catch((error) => {console.log(error)})},pdf2wordByaliyunProcStepOne() {//调用阿里云api开始处理http.post('/concert/pdfToWord', this.aLiModeData).then((response) => {console.log('concert/pdfToWord 9999：', response)this.aLiDocFind.id = response.data.data.body.Data.Idthis.pdf2wordByaliyunProcStep02()}).catch((error) => {console.log(error)})},pdf2wordByaliyunProcStep02() {//this.aLiDocFind.id = 'docmind-20240704-e0c78c564b7f4da9820774ef3e008bff'http.post('/getConvertResult/GetDocumentConvertResult', this.aLiDocFind).then((response) => {console.log('-----------------monitor start------', response.data.data.body.Completed)if (response.data.data.body.Completed.toString() == 'false') {console.log('-----------------monitor start------')this.monitor()} else {// clearInterval(this.timer); // 销毁组件前清除定时器//alert("clearInterval time");clearInterval(this.timer)console.log('-----------------finish------', response)console.log('-----------------finish------', response.data.data.body.Data[0].Url)// 打开一个新窗口或新标签，并导航到指定的URL//window.open(response.data.data.body.Data[0].Url, '_blank')}}).catch((error) => {console.log(error)})},monitor() {//执行需要定时重复执行的任务this.timer = setInterval(() => {console.log('timer start ')this.pdf2wordByaliyunProcStep02()}, 2000) // 每2秒钟执行一次},tabChange(type) {if (type == 'pdf2word') {this.convertTitle = 'pdf 转换 word'this.turnOff()this.pdf2wordUrl = imgOn}if (type == 'pdf2excel') {this.convertTitle = 'pdf 转换 excel'this.turnOff()this.pdf2excelUrl = imgOn}if (type == 'pdf2ppt') {this.convertTitle = 'pdf 转换 ppt'this.turnOff()this.pdf2pptUrl = imgOn}if (type == 'pdf2jpg') {this.convertTitle = 'pdf 转换 jpg'this.turnOff()this.pdf2jpgUrl = imgOn}if (type == 'pdf2html') {this.convertTitle = 'pdf 转换 html'this.turnOff()this.pdf2htmlUrl = imgOn}if (type == 'pdf2text') {this.convertTitle = 'pdf 转换 text'this.turnOff()this.pdf2textUrl = imgOn}},turnOff() {this.pdf2wordUrl = imgOffthis.pdf2excelUrl = imgOffthis.pdf2pptUrl = imgOffthis.pdf2jpgUrl = imgOffthis.pdf2htmlUrl = imgOffthis.pdf2textUrl = imgOff},turnOn() {this.pdf2wordUrl = imgOnthis.pdf2excelUrl = imgOnthis.pdf2pptUrl = imgOnthis.pdf2jpgUrl = imgOnthis.pdf2htmlUrl = imgOnthis.pdf2textUrl = imgOn},// 上传图片handleChange(info) {const status = info.file.statusif (status !== 'uploading') {// console.log(info.file, info.fileList);}if (status === 'done') {this.$message.success(`${info.file.name} file uploaded successfully.`)} else if (status === 'error') {this.$message.error(`${info.file.name} file upload failed.`)}}}}
</script>
<style lang="less" scoped>.zhanwei {//background-color: #ffffff;width: 100%;height: 110px;position: fixed;top: 0;left: 0;z-index: 8;background: url(../../assets/imgs/home_backCopy.png) no-repeat 100%;/*background-image: url("assets/imgs/home_backCopy.png");*/background-size: 100%;}.content {width: 1700px;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: linear-gradient(95deg, #3A78FF 0%, #813BFF 95%);*/background: #22e2ff;.titleItem {display: flex;}}}#div1, #div2, #div3, #div4, #div5, #div6 {display: inline-block;}.upload {margin: 60px auto 0 auto;width: 300px;height: 300px;border: 2px solid red;background-image: url('../../assets/pdf2word.png'); /* 图片背景 */background-size: contain;}.text-pdf {margin: 60px auto 0 auto;font-size: 70px;text-align: center;display: block;}.text-pdf-file {display: block;margin: 60px auto 0 auto;font-size: 40px;text-align: center;}.button-add {width: 300px;height: 70px;border-radius: 10px;}.divider {border-top: 1px solid #ccc; /* 分割线的颜色和宽度 */margin: 5px 5px 5px 5px; /* 分割线的上下外边距 */}.button-line {display: flex;margin-top: 30px;}.button-input {display: flex;margin-top: 30px;text-align: center;}.flex-item {flex: 1 1 auto;width: 15px;margin-right: 10px;}.circle {flex: 1 1 auto;width: 15px;margin-right: 10px;border-radius: 10px;background: #7de3c8;}.label {line-height: 20px;display: inline-block;margin-left: 5px;margin-right: 15px;color: #777;}.radio_type {width: 20px;height: 20px;appearance: none;position: relative;}.radio_type:before {content: '';width: 20px;height: 20px;border: 1px solid #7d7d7d;display: inline-block;border-radius: 50%;vertical-align: middle;}.radio_type:checked:before {content: '';width: 20px;height: 20px;border: 1px solid #c59c5a;background: #c59c5a;display: inline-block;border-radius: 50%;vertical-align: middle;}.radio_type:checked:after {content: '';width: 10px;height: 5px;border: 2px solid white;border-top: transparent;border-right: transparent;text-align: center;display: block;position: absolute;top: 6px;left: 5px;vertical-align: middle;transform: rotate(-45deg);}.radio_type:checked + label {color: #c59c5a;}.container {display: flex;}.left {width: 70%;}.right {width: 100%;margin-right: 35px;}.button-pro {font-size: 40px;width: 200px;height: 70px;margin-left: 120px;border-radius: 10px;background: repeating-linear-gradient(to right, #3c75ff, #7f3cff);}}.body {z-index: 1;position: relative;}
</style>
