bestunion/Otsuka-APP
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pdf预览

Browse Source
This commit is contained in:
Rhett霍 2026-02-13 16:59:30 +08:00
parent 3ee53d21c4
commit 5848878fb5
6 changed files with 698 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
api/FileUpload/FileUpload.js
View File

@ -43,12 +43,13 @@ export function uploadSecurityFileByType(query,data) {
}
// 通用上传文件下载-通用文件下载
// api/FileUpload/FileUpload.js
export function securityFileDownload(query) {
return request({
url: '/common/securityFileDownload',
method: 'get',
params: query,
responseType: 'blob', // 设置响应类型为 blob
responseType: 'arraybuffer', // 改为 arraybuffer
isEncrypt: false
})
}

4
config.js
View File

@ -2,8 +2,8 @@
export default {
// baseUrl: 'https://vue.ruoyi.vip/prod-api', //
// baseUrl: '/prod-api', //前后端分离版的接口地址，转发代理 设置在了manifest.json文件中
baseUrl: 'http://192.168.99.25:18090', //--慎用--慎用--慎用前后端分离版的接口地址--大冢服务器--慎用
// baseUrl: 'http://106.15.139.36:18090', //前后端分离版的接口地址
// baseUrl: 'http://192.168.99.25:18090', //--慎用--慎用--慎用前后端分离版的接口地址--大冢服务器--慎用
baseUrl: 'http://106.15.139.36:18090', //前后端分离版的接口地址
// baseUrl: '/prod-api', //前后端分离版的接口地址
//测试提交

1
package.json
View File

@ -1,5 +1,6 @@
{
"dependencies": {
"pdfjs-dist": "^2.16.105",
"pinia-plugin-persistedstate": "^4.7.1",
"radash": "^12.1.1"
}

1
pages/work/OrderManager/components/LookDataNB.vue
View File

@ -59,7 +59,6 @@
>
{{ form.loadfile.split('\\').pop() }}
</text>
<!-- <text>{{ form.loadfile }}</text> -->
</view>
<view class="label">
<text>审核表(OA):</text>

15
utils/request.js
View File

@ -20,6 +20,10 @@ const request = config => {
url = url.slice(0, -1)
config.url = url
}
// 关键：获取 responseType，默认为 'json'
const responseType = config.responseType || 'json'
return new Promise((resolve, reject) => {
uni.request({
method: config.method || 'get',
@ -27,11 +31,20 @@ const request = config => {
url: config.baseUrl || baseUrl + config.url,
data: config.data,
header: config.header,
dataType: 'json'
dataType: 'json',
responseType: responseType // 添加 responseType 支持
}).then(response => {
// 如果是 arraybuffer 或 blob 类型，直接返回原始数据
if (responseType === 'arraybuffer' || responseType === 'blob') {
resolve(response.data)
return
}
// 原有的 JSON 响应处理逻辑
const res = response
const code = res.data.code || 200
const msg = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) {
showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
if (res.confirm) {

683
utils/utils.js
View File

@ -4,10 +4,598 @@ export const formatPrice = (value) => {
return Number(value).toFixed(2)
}
import { securityFileDownload } from '@/api/FileUpload/FileUpload.js';
import * as pdfjsLib from 'pdfjs-dist';
export const YuLanfile = async (filePath) => {
// 设置PDF.js worker路径（使用CDN）
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
// 存储当前页面的弹框实例
let popupInstance = null;
let styleInjected = false;
// 注入CSS样式
const injectPdfStyle = () => {
if (styleInjected) return;
const styleId = 'pdf_preview_style';
if (!document.getElementById(styleId)) {
const style = document.createElement('style');
style.id = styleId;
style.innerHTML = `
.pdf-preview-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
.pdf-preview-container {
width: 95vw;
max-width: 900px;
height: 90vh;
background-color: #fff;
border-radius: 12px;
display: flex;
flex-direction: column;
overflow: hidden;
animation: pdfFadeIn 0.3s;
}
@keyframes pdfFadeIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.pdf-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #eee;
background-color: #fff;
}
.pdf-title {
font-size: 16px;
font-weight: bold;
color: #333;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pdf-close {
font-size: 28px;
color: #999;
cursor: pointer;
padding: 0 8px;
line-height: 1;
}
.pdf-close:hover {
color: #333;
}
.pdf-content {
flex: 1;
background-color: #525659;
position: relative;
overflow: auto;
padding: 20px;
box-sizing: border-box;
}
.pdf-canvas-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.pdf-page-canvas {
width: 100%;
height: auto;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 4px;
background-color: white;
}
.pdf-footer {
display: flex;
justify-content: flex-end;
padding: 12px 16px;
border-top: 1px solid #eee;
background-color: #fff;
}
.pdf-footer button {
margin: 0 0 0 8px;
min-width: 80px;
padding: 8px 16px;
border-radius: 4px;
border: 1px solid #dcdfe6;
background-color: #fff;
color: #606266;
cursor: pointer;
font-size: 14px;
}
.pdf-footer button:hover {
background-color: #f5f7fa;
}
.pdf-footer button.primary {
background-color: #409eff;
color: #fff;
border-color: #409eff;
}
.pdf-footer button.primary:hover {
background-color: #66b1ff;
}
.pdf-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 16px;
text-align: center;
}
.pdf-pagination {
display: flex;
justify-content: center;
align-items: center;
padding: 12px;
background-color: #fff;
border-top: 1px solid #eee;
}
.pdf-pagination button {
margin: 0 8px;
padding: 4px 12px;
border: 1px solid #dcdfe6;
background-color: #fff;
border-radius: 4px;
cursor: pointer;
}
.pdf-pagination button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.pdf-pagination span {
margin: 0 8px;
color: #606266;
}
`;
document.head.appendChild(style);
styleInjected = true;
}
};
// H5环境：使用Canvas渲染PDF
const createH5Popup = (url, fileName) => {
// 先关闭已存在的弹框
if (popupInstance) {
document.body.removeChild(popupInstance);
popupInstance = null;
}
// 注入样式
injectPdfStyle();
// 创建遮罩层
const overlay = document.createElement('div');
overlay.className = 'pdf-preview-overlay';
// 创建弹框容器
const container = document.createElement('div');
container.className = 'pdf-preview-container';
// 创建头部
const header = document.createElement('div');
header.className = 'pdf-header';
const title = document.createElement('span');
title.className = 'pdf-title';
title.textContent = fileName || 'PDF预览';
const closeBtn = document.createElement('span');
closeBtn.className = 'pdf-close';
closeBtn.textContent = '×';
closeBtn.onclick = () => {
document.body.removeChild(overlay);
if (url && url.startsWith('blob:')) {
URL.revokeObjectURL(url);
}
popupInstance = null;
};
header.appendChild(title);
// header.appendChild(closeBtn);
// 创建内容区域
const content = document.createElement('div');
content.className = 'pdf-content';
// 创建Canvas容器
const canvasContainer = document.createElement('div');
canvasContainer.className = 'pdf-canvas-container';
content.appendChild(canvasContainer);
// 添加加载提示
const loadingDiv = document.createElement('div');
loadingDiv.className = 'pdf-loading';
loadingDiv.textContent = '正在加载PDF文档...';
content.appendChild(loadingDiv);
container.appendChild(header);
container.appendChild(content);
// 创建底部
const footer = document.createElement('div');
footer.className = 'pdf-footer';
const closeFooterBtn = document.createElement('button');
closeFooterBtn.textContent = '关闭';
closeFooterBtn.onclick = closeBtn.onclick;
const downloadBtn = document.createElement('button');
downloadBtn.textContent = '下载';
downloadBtn.className = 'primary';
downloadBtn.onclick = () => {
window.open(url);
};
// footer.appendChild(downloadBtn);
footer.appendChild(closeFooterBtn);
container.appendChild(footer);
overlay.appendChild(container);
document.body.appendChild(overlay);
// 使用PDF.js渲染PDF
pdfjsLib.getDocument(url).promise.then(pdf => {
// 移除加载提示
if (content.contains(loadingDiv)) {
content.removeChild(loadingDiv);
}
// 添加分页控制器
const paginationDiv = document.createElement('div');
paginationDiv.className = 'pdf-pagination';
let currentPage = 1;
const totalPages = pdf.numPages;
const prevBtn = document.createElement('button');
prevBtn.textContent = '上一页';
prevBtn.disabled = true;
const nextBtn = document.createElement('button');
nextBtn.textContent = '下一页';
const pageInfo = document.createElement('span');
pageInfo.textContent = `${currentPage} / ${totalPages}`;
prevBtn.onclick = () => {
if (currentPage > 1) {
currentPage--;
renderPage(currentPage);
pageInfo.textContent = `${currentPage} / ${totalPages}`;
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === totalPages;
}
};
nextBtn.onclick = () => {
if (currentPage < totalPages) {
currentPage++;
renderPage(currentPage);
pageInfo.textContent = `${currentPage} / ${totalPages}`;
prevBtn.disabled = currentPage === 1;
nextBtn.disabled = currentPage === totalPages;
}
};
// paginationDiv.appendChild(prevBtn);
// paginationDiv.appendChild(pageInfo);
// paginationDiv.appendChild(nextBtn);
// content.appendChild(paginationDiv);
// 创建Canvas元素
const canvas = document.createElement('canvas');
canvas.className = 'pdf-page-canvas';
canvasContainer.appendChild(canvas);
// 渲染指定页面
const renderPage = (pageNumber) => {
pdf.getPage(pageNumber).then(page => {
// 根据容器宽度计算缩放比例
const containerWidth = content.clientWidth - 40; // 减去padding
const viewport = page.getViewport({ scale: 1.0 });
const scale = containerWidth / viewport.width;
const scaledViewport = page.getViewport({ scale });
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
const context = canvas.getContext('2d');
const renderContext = {
canvasContext: context,
viewport: scaledViewport
};
return page.render(renderContext).promise;
});
};
// 渲染第一页
renderPage(1);
// 监听窗口大小变化，重新渲染
const resizeHandler = () => {
renderPage(currentPage);
};
window.addEventListener('resize', resizeHandler);
// 清理事件监听
const originalClose = closeBtn.onclick;
closeBtn.onclick = () => {
window.removeEventListener('resize', resizeHandler);
originalClose.call(closeBtn);
};
}).catch(error => {
console.error('PDF渲染失败:', error);
if (content.contains(loadingDiv)) {
content.removeChild(loadingDiv);
}
content.innerHTML = `
<div style="display:flex; flex-direction:column; justify-content:center; align-items:center; height:100%; padding:20px; text-align:center;">
<div style="color:#f56c6c; font-size:18px; margin-bottom:16px;">
<span style="display:block; margin-bottom:8px;">⚠️ PDF预览失败</span>
</div>
<div style="color:#999; font-size:14px; margin-bottom:24px; max-width:80%; word-break:break-all;">
${error.message || '未知错误'}
</div>
<button onclick="window.open('${url}')"
style="padding:12px 32px; background-color:#409eff; color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:16px; font-weight:500;">
下载PDF文件
</button>
</div>
`;
});
popupInstance = overlay;
overlay.addEventListener('click', (e) => {
if (e.target === overlay) {
closeBtn.onclick();
}
});
return overlay;
};
// APP环境：保存Blob到临时文件
const saveBlobToFile = (blob, fileName) => {
return new Promise((resolve, reject) => {
// #ifdef APP-PLUS
const reader = new FileReader();
reader.onload = (e) => {
const base64Data = e.target.result.split(',')[1];
const filePath = '_doc/' + Date.now() + '_' + fileName;
plus.io.writeFile({
filename: filePath,
data: base64Data,
success: () => {
resolve(filePath);
},
fail: (err) => {
reject(err);
}
});
};
reader.onerror = (err) => {
reject(err);
};
reader.readAsDataURL(blob);
// #endif
// #ifndef APP-PLUS
reject(new Error('非APP环境'));
// #endif
});
};
// APP环境：使用本地文件预览
const createAppPopup = (filePath, fileName) => {
// #ifdef APP-PLUS
if (popupInstance) {
popupInstance.close();
popupInstance = null;
}
const popupId = 'pdf_preview_' + Date.now();
const html = `<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.min.js"></script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background-color: #fff;
height: 100vh;
display: flex;
flex-direction: column;
}
.pdf-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid #eee;
background-color: #fff;
}
.pdf-title {
font-size: 16px;
font-weight: bold;
color: #333;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pdf-close {
font-size: 28px;
color: #999;
cursor: pointer;
padding: 0 8px;
}
.pdf-content {
flex: 1;
background-color: #525659;
overflow: auto;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.pdf-canvas {
width: 100%;
height: auto;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-radius: 4px;
margin-bottom: 20px;
}
.pdf-footer {
display: flex;
justify-content: flex-end;
padding: 12px 16px;
border-top: 1px solid #eee;
background-color: #fff;
}
.pdf-footer button {
margin: 0 0 0 8px;
min-width: 80px;
padding: 8px 16px;
border-radius: 4px;
border: 1px solid #dcdfe6;
background-color: #fff;
color: #606266;
font-size: 14px;
cursor: pointer;
}
.pdf-footer button.primary {
background-color: #409eff;
color: #fff;
border-color: #409eff;
}
.pdf-loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 16px;
}
</style>
</head>
<body>
<div class="pdf-header">
<span class="pdf-title">${fileName || 'PDF预览'}</span>
<span class="pdf-close" onclick="closePopup()">×</span>
</div>
<div class="pdf-content" id="pdfContent">
<div class="pdf-loading" id="loading">正在加载PDF...</div>
</div>
<div class="pdf-footer">
<button onclick="downloadFile()" class="primary">下载</button>
<button onclick="closePopup()">关闭</button>
</div>
<script>
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.16.105/pdf.worker.min.js';
const url = '${filePath}';
const content = document.getElementById('pdfContent');
const loading = document.getElementById('loading');
pdfjsLib.getDocument(url).promise.then(pdf => {
loading.style.display = 'none';
const renderPage = (pageNumber) => {
pdf.getPage(pageNumber).then(page => {
const containerWidth = content.clientWidth - 40;
const viewport = page.getViewport({ scale: 1.0 });
const scale = containerWidth / viewport.width;
const scaledViewport = page.getViewport({ scale });
const canvas = document.createElement('canvas');
canvas.className = 'pdf-canvas';
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;
const context = canvas.getContext('2d');
const renderContext = {
canvasContext: context,
viewport: scaledViewport
};
page.render(renderContext).promise.then(() => {
content.appendChild(canvas);
// 渲染下一页
if (pageNumber < pdf.numPages) {
renderPage(pageNumber + 1);
}
});
});
};
renderPage(1);
}).catch(error => {
loading.style.display = 'none';
content.innerHTML = '<div style="color:#f56c6c; text-align:center; padding:40px;">PDF加载失败<br><br><button onclick="downloadFile()" style="padding:8px 24px; background:#409eff; color:#fff; border:none; border-radius:4px;">下载文件</button></div>';
});
function closePopup() {
plus.webview.currentWebview().close();
}
function downloadFile() {
plus.runtime.openWeb('${filePath}');
}
<\/script>
</body>
</html>`;
const webview = plus.webview.create('', popupId, {
top: '10vh',
left: '5vw',
width: '90vw',
height: '80vh',
scrollIndicator: 'none',
backgroundColor: '#ffffff',
borderRadius: '12px',
mask: 'rgba(0,0,0,0.5)'
});
webview.loadHTML(html);
webview.show();
popupInstance = webview;
return webview;
// #endif
};
// 主函数
export const YuLanfile = async (filePath, returnUrlOnly = false) => {
if (!filePath) {
uni.showToast({ title: '文件路径不存在', icon: 'none' })
return
@ -21,14 +609,95 @@ export const YuLanfile = async (filePath) => {
delete: false
})
console.log('返回数据:', response);
// 转换为 Blob
let blob;
if (response instanceof ArrayBuffer) {
blob = new Blob([response], { type: 'application/pdf' });
} else if (response instanceof Blob) {
blob = response;
} else {
try {
const uint8Array = new Uint8Array(response.length);
for (let i = 0; i < response.length; i++) {
uint8Array[i] = response.charCodeAt(i) & 0xFF;
}
blob = new Blob([uint8Array], { type: 'application/pdf' });
} catch (e) {
throw new Error('无法转换文件格式');
}
}
// 获取文件名
const fileName = filePath.split('\\').pop() || 'document.pdf';
// #ifdef H5
// H5环境：创建本地文件URL
const url = URL.createObjectURL(blob);
if (returnUrlOnly) {
uni.hideLoading();
return url;
}
// 使用Canvas渲染PDF
createH5Popup(url, fileName);
uni.hideLoading();
return url;
// #endif
// #ifdef APP-PLUS
// APP环境：保存到临时文件
const tempFilePath = await saveBlobToFile(blob, fileName);
if (returnUrlOnly) {
uni.hideLoading();
return tempFilePath;
}
createAppPopup(tempFilePath, fileName);
uni.hideLoading();
return tempFilePath;
// #endif
// #ifdef MP-WEIXIN
// 微信小程序：使用wx.openDocument
const wxUrl = URL.createObjectURL(blob);
const fs = wx.getFileSystemManager();
const tempFilePath = wx.env.USER_DATA_PATH + '/' + Date.now() + '_' + fileName;
// 将blob转换为ArrayBuffer
const arrayBuffer = await blob.arrayBuffer();
fs.writeFile({
filePath: tempFilePath,
data: arrayBuffer,
encoding: 'binary',
success: () => {
wx.openDocument({
filePath: tempFilePath,
showMenu: true,
success: () => {
URL.revokeObjectURL(wxUrl);
},
fail: (err) => {
console.error('打开文档失败:', err);
uni.showToast({ title: '打开文件失败', icon: 'none' });
URL.revokeObjectURL(wxUrl);
}
});
},
fail: (err) => {
console.error('写入文件失败:', err);
uni.showToast({ title: '文件处理失败', icon: 'none' });
URL.revokeObjectURL(wxUrl);
}
});
uni.hideLoading();
return tempFilePath;
// #endif
} catch (error) {
console.error('文件下载失败:', error);
uni.showToast({ title: '文件加载失败', icon: 'none' })
} finally {
uni.hideLoading()
console.error('文件预览失败:', error);
uni.hideLoading();
uni.showToast({ title: '文件加载失败', icon: 'none' });
throw error;
}
}