<template>
|
<div class="app-container">
|
<!-- 水平排列容器 -->
|
<div style="display: flex; align-items: center; gap: 20px;">
|
<!-- 上传区域 -->
|
<div class="upload-container" style="width: 400px; height: 200px;">
|
<el-upload
|
class="upload-demo"
|
ref="upload"
|
:action="uploadUrl"
|
:headers="uploadHeaders"
|
:on-success="handleUploadSuccess"
|
:on-error="handleUploadError"
|
:before-upload="beforeUpload"
|
accept=".pdf"
|
:auto-upload="true"
|
drag
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">支持单个或批量上传，请选择PDF文件</div>
|
</el-upload>
|
</div>
|
|
<!-- 下载按钮区域 - 上传前禁用，上传后可用 -->
|
<div class="download-container" style="white-space: nowrap;">
|
<el-button
|
type="primary"
|
icon="el-icon-download"
|
@click="downloadFile"
|
:disabled="!canDownload"
|
>
|
获取下载链接
|
</el-button>
|
<!-- 显示下载链接区域 -->
|
<div v-if="showDownloadLink" style="margin-left: 10px;">
|
<div style="margin-bottom: 5px;">
|
<span>下载链接:</span>
|
</div>
|
<div style="margin-bottom: 5px;">
|
<a :href="displayedDownloadLink" target="_blank" style="color: #409EFF; word-break: break-all; max-width: 400px; display: inline-block;">
|
{{ displayedDownloadLink }}
|
</a>
|
</div>
|
<div>
|
<el-button
|
type="text"
|
icon="el-icon-copy-document"
|
@click="copyLink"
|
size="small"
|
>
|
复制
|
</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getToken } from '@/utils/auth'
|
import { getPdfFile } from '@/api/system/dpdf'
|
export default {
|
name: "DoublePdf",
|
data() {
|
return {
|
fid: '',
|
// 遮罩层
|
loading: true,
|
// 选中数组
|
ids: [],
|
// 非单个禁用
|
single: true,
|
// 非多个禁用
|
multiple: true,
|
// 显示搜索条件
|
showSearch: true,
|
// 总条数
|
total: 0,
|
// 【请填写功能名称】表格数据
|
categoryList: [],
|
// 弹出层标题
|
title: "",
|
// 是否显示弹出层
|
open: false,
|
// 查询参数
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
numb: null,
|
nname: null
|
},
|
// 表单参数
|
form: {},
|
// 表单校验
|
rules: {
|
numb: [
|
{ required: true, message: '请输入编号', trigger: 'blur' }
|
],
|
nname: [
|
{ required: true, message: '请输入名称', trigger: 'blur' }
|
]
|
},
|
// 文件上传相关
|
uploadUrl: process.env.VUE_APP_BASE_API + "/system/doublePdf/upload", // 上传接口
|
uploadHeaders: {
|
Authorization: 'Bearer ' + getToken()
|
},
|
// 文件下载相关
|
canDownload: false, // 是否可以下载
|
uploadedFileName: '', // 已上传的文件名
|
downloadUrl: '', // 下载链接
|
showDownloadLink: false, // 是否显示下载链接
|
displayedDownloadLink: '' // 显示的下载链接
|
}
|
},
|
created() {
|
this.getList()
|
},
|
methods: {
|
/** 查询【请填写功能名称】列表 */
|
getList() {
|
this.loading = true
|
},
|
|
/** 上传前检查 */
|
beforeUpload(file) {
|
const isPdf = file.type === 'application/pdf'
|
const isLt50M = file.size / 1024 / 1024 < 50
|
|
if (!isPdf) {
|
this.$message.error('上传文件只能是 PDF 格式!')
|
}
|
if (!isLt50M) {
|
this.$message.error('上传文件大小不能超过 50MB!')
|
}
|
|
return isPdf && isLt50M
|
},
|
|
/** 上传成功处理 */
|
handleUploadSuccess(response) {
|
console.log(response)
|
console.log("-------------")
|
if (response.code === 200) {
|
this.$message.success('上传成功')
|
// 设置下载相关信息
|
this.canDownload = true
|
// 假设响应中包含文件名和下载链接
|
this.fid = (response.data.data)
|
// this.uploadedFileName = response.fileName || '上传的文件'
|
// this.downloadUrl = response.downloadUrl || (process.env.VUE_APP_BASE_API + "/system/doublePdf/download?fileId=" + response.fileId)
|
// // 可以在这里刷新列表数据
|
// // this.getList()
|
} else {
|
this.$message.error(response.msg || '上传失败')
|
}
|
},
|
|
/** 获取下载链接 */
|
downloadFile() {
|
// 发起ajax请求获取下载链接
|
getPdfFile(this.fid).then(response => {
|
console.log(response)
|
// 确保response.data.data是字符串类型
|
const dataStr = String(response.data.data)
|
alert(dataStr)
|
if(dataStr.includes("任务尚未结束，无法获取文件")) {
|
this.$message.success("文件没有处理完，稍等片刻")
|
return;
|
}
|
if (response.code === 200 && response.data) {
|
// 假设响应中包含下载链接
|
this.displayedDownloadLink = response.data.data || response.data.downloadUrl || response.data
|
this.showDownloadLink = true
|
this.$message.success('下载链接已获取')
|
} else {
|
this.$message.error('获取下载链接失败: ' + (response.msg || '未知错误'))
|
}
|
}).catch(error => {
|
console.error('获取下载链接失败:', error)
|
this.$message.error('获取下载链接失败，请重试')
|
})
|
},
|
|
/** 复制链接到剪贴板 */
|
copyLink() {
|
if (this.displayedDownloadLink) {
|
// 创建临时文本区域
|
const textarea = document.createElement('textarea')
|
textarea.value = this.displayedDownloadLink
|
textarea.style.position = 'fixed'
|
textarea.style.opacity = '0'
|
document.body.appendChild(textarea)
|
textarea.select()
|
|
try {
|
document.execCommand('copy')
|
this.$message.success('链接已复制到剪贴板')
|
} catch (err) {
|
this.$message.error('复制失败，请手动复制')
|
console.error('Copy error:', err)
|
} finally {
|
document.body.removeChild(textarea)
|
}
|
}
|
},
|
|
/** 上传失败处理 */
|
handleUploadError(err) {
|
this.$message.error('上传失败，请重试')
|
console.error('Upload error:', err)
|
}
|
}
|
}
|
/** 提交按钮 */
|
|
</script>
|
