fix:打包问题
This commit is contained in:
@@ -115,7 +115,7 @@ const CustomerForm = () => {
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
bodyStyle={{ backgroundColor: '#fff' }}
|
||||
styles={{ backgroundColor: '#fff' }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Card, Button, Typography, Space, Spin, Divider, Tag } from 'antd';
|
||||
import { Card, Button, Typography, Space, Spin, Divider, Tag, message } from 'antd';
|
||||
import { FileTextOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { supabase } from '@/config/supabase';
|
||||
import html2pdf from 'html2pdf.js';
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
@@ -43,20 +44,83 @@ const QuotationPreview = () => {
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
// 导出PDF
|
||||
const handleExportPDF = () => {
|
||||
const element = document.getElementById('quotation-content');
|
||||
const opt = {
|
||||
margin: [10, 10],
|
||||
filename: `${quotation.attributes.quataName || '报价单'}.pdf`,
|
||||
image: { type: 'jpeg', quality: 0.98 },
|
||||
html2canvas: { scale: 2 },
|
||||
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
|
||||
};
|
||||
// PDF导出函数
|
||||
const exportPDF = async () => {
|
||||
try {
|
||||
// 显示加载中
|
||||
message.loading('正在生成PDF...', 0);
|
||||
|
||||
// 获取要导出的DOM元素
|
||||
const element = document.getElementById('quotation-content');
|
||||
|
||||
// 使用html2canvas将DOM转换为canvas
|
||||
const canvas = await html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
logging: false, // 关闭日志
|
||||
backgroundColor: '#ffffff' // 设置背景色
|
||||
});
|
||||
|
||||
html2pdf().set(opt).from(element).save();
|
||||
// 获取canvas的宽高
|
||||
const imgWidth = 210; // A4纸的宽度(mm)
|
||||
const pageHeight = 297; // A4纸的高度(mm)
|
||||
const imgHeight = canvas.height * imgWidth / canvas.width;
|
||||
const pdfWidth = imgWidth;
|
||||
const pdfHeight = imgHeight;
|
||||
|
||||
// 将canvas转为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
// 初始化jsPDF
|
||||
const pdf = new jsPDF('p', 'mm', 'a4');
|
||||
|
||||
// 计算分页
|
||||
let position = 0;
|
||||
let currentPage = 1;
|
||||
|
||||
while (position < pdfHeight) {
|
||||
// 添加图片到PDF
|
||||
pdf.addImage(
|
||||
imgData,
|
||||
'JPEG',
|
||||
0, // x坐标
|
||||
position === 0 ? 0 : -position, // y坐标
|
||||
pdfWidth, // 图片宽度
|
||||
pdfHeight // 图片高度
|
||||
);
|
||||
|
||||
position += pageHeight;
|
||||
|
||||
// 如果还有内容,添加新页面
|
||||
if (position < pdfHeight) {
|
||||
pdf.addPage();
|
||||
currentPage++;
|
||||
}
|
||||
}
|
||||
|
||||
// 保存PDF
|
||||
pdf.save(`${quotation.attributes.quataName || '报价单'}.pdf`);
|
||||
|
||||
// 关闭加载提示
|
||||
message.destroy();
|
||||
message.success('PDF导出成功!');
|
||||
} catch (error) {
|
||||
console.error('PDF导出失败:', error);
|
||||
message.error('PDF导出失败,请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// 导出按钮组件
|
||||
const ExportPDFButton = () => (
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={exportPDF}
|
||||
>
|
||||
导出PDF
|
||||
</Button>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-center items-center h-full">
|
||||
@@ -79,13 +143,7 @@ const QuotationPreview = () => {
|
||||
<FileTextOutlined className="text-blue-500" />
|
||||
<span>报价单预览</span>
|
||||
</Space>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<DownloadOutlined />}
|
||||
onClick={handleExportPDF}
|
||||
>
|
||||
导出PDF
|
||||
</Button>
|
||||
<ExportPDFButton />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
@@ -165,7 +223,7 @@ const QuotationPreview = () => {
|
||||
<Text>{currencySymbol}{attributes.beforeTaxAmount?.toLocaleString()}</Text>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<Text>税率:</Text>
|
||||
<Text>税率</Text>
|
||||
<Text>{attributes.taxRate}%</Text>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
|
||||
@@ -624,7 +624,7 @@ const ServicePage = () => {
|
||||
background: "rgba(59, 130, 246, 0.05)",
|
||||
borderBottom: "1px solid rgba(59, 130, 246, 0.1)",
|
||||
}}
|
||||
bodyStyle={{
|
||||
style={{
|
||||
background: "rgba(59, 130, 246, 0.02)",
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -115,7 +115,7 @@ const SupplierForm = () => {
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
bodyStyle={{ backgroundColor: '#fff' }}
|
||||
style={{ backgroundColor: '#fff' }}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
|
||||
@@ -41,10 +41,10 @@ const TeamManagement = () => {
|
||||
|
||||
const handleTableChange = (newPagination, filters, newSorter) => {
|
||||
const params = {
|
||||
current: newPagination.current,
|
||||
pageSize: newPagination.pageSize,
|
||||
field: newSorter.field,
|
||||
order: newSorter.order,
|
||||
current: newPagination?.current,
|
||||
pageSize: newPagination?.pageSize,
|
||||
field: newSorter?.field,
|
||||
order: newSorter?.order,
|
||||
};
|
||||
|
||||
setPagination(prev => ({
|
||||
|
||||
Reference in New Issue
Block a user