zy_oyj/sgxt_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 移除pdf下载功能

Browse Source
This commit is contained in:
huangchengfa
2025-12-12 09:47:20 +08:00
parent 7062604ba3
commit 6c08a68d4c
3 changed files with 105 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -23,14 +23,12 @@
"@wangeditor/editor-for-vue": "^5.1.12",
"axios": "^0.26.0",
"core-js": "^3.6.5",
"draggable-resizable-vue3": "^1.0.94-beta",
"echarts": "^5.3.3",
"echarts-gl": "^2.0.9",
"el-table-infinite-scroll": "^3.0.6",
"element-plus": "2.0.2",
"file-saver": "^2.0.5",
"gifler": "^0.1.0",
"html2pdf.js": "^0.10.1",
"image-compressor.js": "^1.1.4",
"lodash": "^4.17.21",
"lunar-javascript": "^1.7.5",

105
src/utils/export.js
View File

@ -1,5 +1,5 @@
import { saveAs } from 'file-saver';
import html2pdf from 'html2pdf.js';
// import html2pdf from 'html2pdf.js';
const isDOM = (obj) => obj instanceof HTMLElement;
@ -9,64 +9,65 @@ const isDOM = (obj) => obj instanceof HTMLElement;
* @param {string} name 文件名
*/
export const downloadPDF = async (dom, name = '导出文件') => {
if (!isDOM(dom)) return;
// 先不用这个
// if (!isDOM(dom)) return;
try {
// 等待一段时间确保所有图表完全渲染
await new Promise(resolve => setTimeout(resolve, 1500));
// try {
// // 等待一段时间确保所有图表完全渲染
// await new Promise(resolve => setTimeout(resolve, 1500));
// 强制重新渲染所有图表
const resizeEvent = new Event('resize');
window.dispatchEvent(resizeEvent);
// // 强制重新渲染所有图表
// const resizeEvent = new Event('resize');
// window.dispatchEvent(resizeEvent);
// 再次等待图表重绘完成
await new Promise(resolve => setTimeout(resolve, 1000));
// // 再次等待图表重绘完成
// await new Promise(resolve => setTimeout(resolve, 1000));
// 获取内容的实际高度
const contentHeight = dom.scrollHeight;
// // 获取内容的实际高度
// const contentHeight = dom.scrollHeight;
// 计算需要的页面尺寸（单位：毫米）
// 将像素转换为毫米（1px ≈ 0.264583mm）
const a4HeightMm = 297; // A4纸高度
const contentHeightMm = contentHeight * 0.264583;
// // 计算需要的页面尺寸（单位：毫米）
// // 将像素转换为毫米（1px ≈ 0.264583mm）
// const a4HeightMm = 297; // A4纸高度
// const contentHeightMm = contentHeight * 0.264583;
const opt = {
margin: [10, 10, 20, 10], // [top, right, bottom, left] 格式
filename: name + '.pdf',
image: {
type: 'png',
quality: 1
},
html2canvas: {
scale: 1.5,
useCoRs: true,
allowTaint: true,
foreignObjectRendering: false,
logging: false,
width: dom.scrollWidth,
height: dom.scrollHeight + 100, // 增加额外高度，包含底部内容
scrollX: 0,
scrollY: 0
},
jsPDF: {
unit: 'mm',
format: [210, contentHeightMm + 40], // 自定义页面高度，确保所有内容都在一页
orientation: "portrait"
},
pagebreak: {
mode: "avoid", // 尽量避免在元素中间分页
before: '.analysis-report-box h2', // 在h2标题前避免分页
after: '.analysis-report-box h2', // 在h2标题后避免分页
avoid: '.analysis-report-box p' // 避免在段落中间分页
}
};
// const opt = {
// margin: [10, 10, 20, 10], // [top, right, bottom, left] 格式
// filename: name + '.pdf',
// image: {
// type: 'png',
// quality: 1
// },
// html2canvas: {
// scale: 1.5,
// useCoRs: true,
// allowTaint: true,
// foreignObjectRendering: false,
// logging: false,
// width: dom.scrollWidth,
// height: dom.scrollHeight + 100, // 增加额外高度，包含底部内容
// scrollX: 0,
// scrollY: 0
// },
// jsPDF: {
// unit: 'mm',
// format: [210, contentHeightMm + 40], // 自定义页面高度，确保所有内容都在一页
// orientation: "portrait"
// },
// pagebreak: {
// mode: "avoid", // 尽量避免在元素中间分页
// before: '.analysis-report-box h2', // 在h2标题前避免分页
// after: '.analysis-report-box h2', // 在h2标题后避免分页
// avoid: '.analysis-report-box p' // 避免在段落中间分页
// }
// };
await html2pdf().set(opt).from(dom).save();
return true;
} catch (error) {
console.error('PDF导出失败:', error);
return false;
}
// await html2pdf().set(opt).from(dom).save();
// return true;
// } catch (error) {
// console.error('PDF导出失败:', error);
// return false;
// }
}

104
src/views/backOfficeSystem/JudgmentHome/ResearchHome/components/AnalysisReport/index.vue
View File

@ -174,67 +174,67 @@ const tabHeightFn = () => {
};
/** 以pdf形式下载 */
const downLoadPdf = async () => {
downLoading.value = true;
ElMessage.info('下载界面会展开，是正常的。');
// downLoading.value = true;
// ElMessage.info('下载界面会展开，是正常的。');
try {
// 强制刷新所有图表
const resizeEvent = new Event('resize');
window.dispatchEvent(resizeEvent);
// try {
// // 强制刷新所有图表
// const resizeEvent = new Event('resize');
// window.dispatchEvent(resizeEvent);
// 等待图表重绘
await new Promise(resolve => setTimeout(resolve, 1000));
// // 等待图表重绘
// await new Promise(resolve => setTimeout(resolve, 1000));
// 保存原始样式
const originalOverflow = tableBox.value.style.overflow;
const originalHeight = tableBox.value.style.height;
const originalPaddingBottom = tableBox.value.style.paddingBottom;
const originalMarginBottom = tableBox.value.style.marginBottom;
// // 保存原始样式
// const originalOverflow = tableBox.value.style.overflow;
// const originalHeight = tableBox.value.style.height;
// const originalPaddingBottom = tableBox.value.style.paddingBottom;
// const originalMarginBottom = tableBox.value.style.marginBottom;
// 确保所有内容都可见，并增加底部间距
tableBox.value.style.overflow = 'visible';
tableBox.value.style.height = 'auto';
tableBox.value.style.paddingBottom = '50px'; // 增加底部内边距
tableBox.value.style.marginBottom = '30px'; // 增加底部外边距
// // 确保所有内容都可见，并增加底部间距
// tableBox.value.style.overflow = 'visible';
// tableBox.value.style.height = 'auto';
// tableBox.value.style.paddingBottom = '50px'; // 增加底部内边距
// tableBox.value.style.marginBottom = '30px'; // 增加底部外边距
// 为最后的总结分析部分添加特殊样式，避免分页截断
const summaryElements = tableBox.value.querySelectorAll('h2');
const lastH2 = summaryElements[summaryElements.length - 1];
if (lastH2 && lastH2.textContent.includes('总结分析')) {
lastH2.style.pageBreakBefore = 'always';
lastH2.style.pageBreakInside = 'avoid';
// // 为最后的总结分析部分添加特殊样式，避免分页截断
// const summaryElements = tableBox.value.querySelectorAll('h2');
// const lastH2 = summaryElements[summaryElements.length - 1];
// if (lastH2 && lastH2.textContent.includes('总结分析')) {
// lastH2.style.pageBreakBefore = 'always';
// lastH2.style.pageBreakInside = 'avoid';
// 确保总结分析的段落不被分页截断
const nextP = lastH2.nextElementSibling;
if (nextP && nextP.tagName === 'P') {
nextP.style.pageBreakInside = 'avoid';
nextP.style.marginBottom = '30px';
}
}
// // 确保总结分析的段落不被分页截断
// const nextP = lastH2.nextElementSibling;
// if (nextP && nextP.tagName === 'P') {
// nextP.style.pageBreakInside = 'avoid';
// nextP.style.marginBottom = '30px';
// }
// }
await downloadPDF(tableBox.value, '警情分析报告');
// await downloadPDF(tableBox.value, '警情分析报告');
// 恢复原始样式
tableBox.value.style.overflow = originalOverflow;
tableBox.value.style.height = originalHeight;
tableBox.value.style.paddingBottom = originalPaddingBottom;
tableBox.value.style.marginBottom = originalMarginBottom;
// // 恢复原始样式
// tableBox.value.style.overflow = originalOverflow;
// tableBox.value.style.height = originalHeight;
// tableBox.value.style.paddingBottom = originalPaddingBottom;
// tableBox.value.style.marginBottom = originalMarginBottom;
// 恢复总结分析部分的样式
if (lastH2) {
lastH2.style.pageBreakBefore = '';
lastH2.style.pageBreakInside = '';
const nextP = lastH2.nextElementSibling;
if (nextP && nextP.tagName === 'P') {
nextP.style.pageBreakInside = '';
nextP.style.marginBottom = '';
}
}
} catch (error) {
console.error('下载失败:', error);
} finally {
downLoading.value = false;
}
// // 恢复总结分析部分的样式
// if (lastH2) {
// lastH2.style.pageBreakBefore = '';
// lastH2.style.pageBreakInside = '';
// const nextP = lastH2.nextElementSibling;
// if (nextP && nextP.tagName === 'P') {
// nextP.style.pageBreakInside = '';
// nextP.style.marginBottom = '';
// }
// }
// } catch (error) {
// console.error('下载失败:', error);
// } finally {
// downLoading.value = false;
// }
}
const downloadWithStyles = async () => {
if (!tableBox.value?.innerHTML) return;