预览功能
用到的data值：
点击查看代码
data(){
return{
fileUrl: null,
dialogTitlePdf:'',
dialogVisiblePdf:false,
disabledPdf:false,
}
}
预览的弹框：
点击查看代码
<el-dialog
:title="dialogTitlePdf"
:visible.sync="dialogVisiblePdf"
width="900px"
custom-class="loadingBox">
<iframe :src="fileUrl" width="100%" height="600px"></iframe>
</el-dialog>
点击事件：
点击查看代码
<el-button @click="handlePreview" size="mini" type="text">预览</el-button>
事件：
点击查看代码
handlePreview(){
this.dialogTitlePdf = "预览";
this.dialogVisiblePdf = true;
this.disabledPdf = false;
getWord2PdfByte().then((res) => {
const contentType = res.headers ? res.headers['content-type'] : 'application/pdf'; // 如果没有 content-type，使用默认值
const fileBlob = new Blob([res], { type: contentType});
this.fileUrl = URL.createObjectURL(fileBlob);
}).catch((error) => {
console.error('文件预览失败：', error);
});
},
下载
点击查看代码
<el-button @click="handleDownload" size="mini" type="text">下载</el-button>
点击查看代码
handleDownload(row) {
// 使用对象a存放文件的信息
getWord2PdfByte().then((res) => {
// 检查 res.headers 是否存在，并确保 PDF 文件的 content-type
const contentType = res.headers && res.headers['content-type'] ? res.headers['content-type'] : 'application/pdf';
// 创建 Blob 对象
const blob = new Blob([res], { type: contentType });
const fileName = row.fileName || 'downloaded_file.pdf'; // 如果没有文件名，使用默认名
// 判断是否支持 'download' 属性
if ('download' in document.createElement('a')) {
// 创建隐藏的 <a> 元素
const elink = document.createElement('a');
elink.download = fileName; // 设置文件名
elink.style.display = 'none';
elink.href = URL.createObjectURL(blob); // 创建 Blob 对象 URL
document.body.appendChild(elink); // 将 <a> 元素添加到文档中
elink.click(); // 自动触发点击事件下载文件
URL.revokeObjectURL(elink.href); // 释放 URL 对象
document.body.removeChild(elink); // 从文档中移除 <a> 元素
} else if (navigator.msSaveBlob) {
// IE 10+ 浏览器的下载方式
navigator.msSaveBlob(blob, fileName);
} else {
console.error('该浏览器不支持文件下载');
}
}).catch((error) => {
console.error('文件下载失败：', error);
});
},