|
@@ -819,9 +819,10 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
|
- // 使用 html2canvas 进行转换
|
|
|
|
|
|
|
+ // 使用 html2canvas 进行转换,scale: 2 提高清晰度
|
|
|
|
|
+ const scale = 2;
|
|
|
const canvas = await html2canvas(targetElement, {
|
|
const canvas = await html2canvas(targetElement, {
|
|
|
- scale: 1, // 1倍分辨率,避免过大
|
|
|
|
|
|
|
+ scale: scale, // 2倍分辨率,提高清晰度
|
|
|
backgroundColor: '#ffffff',
|
|
backgroundColor: '#ffffff',
|
|
|
useCORS: true, // 尝试跨域图片
|
|
useCORS: true, // 尝试跨域图片
|
|
|
logging: false,
|
|
logging: false,
|
|
@@ -839,9 +840,9 @@
|
|
|
const outputCanvas = document.getElementById('outputCanvas');
|
|
const outputCanvas = document.getElementById('outputCanvas');
|
|
|
outputCanvas.width = canvas.width;
|
|
outputCanvas.width = canvas.width;
|
|
|
outputCanvas.height = canvas.height;
|
|
outputCanvas.height = canvas.height;
|
|
|
- // 移除内联样式,使用实际像素尺寸
|
|
|
|
|
- outputCanvas.style.width = canvas.width + 'px';
|
|
|
|
|
- outputCanvas.style.height = canvas.height + 'px';
|
|
|
|
|
|
|
+ // 使用原始尺寸(去除scale倍数),保持显示比例
|
|
|
|
|
+ outputCanvas.style.width = (canvas.width / scale) + 'px';
|
|
|
|
|
+ outputCanvas.style.height = (canvas.height / scale) + 'px';
|
|
|
const ctx = outputCanvas.getContext('2d');
|
|
const ctx = outputCanvas.getContext('2d');
|
|
|
ctx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
|
|
ctx.clearRect(0, 0, outputCanvas.width, outputCanvas.height);
|
|
|
ctx.drawImage(canvas, 0, 0);
|
|
ctx.drawImage(canvas, 0, 0);
|
|
@@ -881,21 +882,23 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
|
- const imgData = outputCanvas.toDataURL('image/png');
|
|
|
|
|
- // 使用 Canvas 的 CSS 尺寸(显示尺寸),而不是内部像素尺寸
|
|
|
|
|
- const canvasWidth =
|
|
|
|
|
|
|
+ // 使用 Canvas 的 CSS 尺寸(显示尺寸)
|
|
|
|
|
+ const cssWidth =
|
|
|
parseFloat(outputCanvas.style.width) || outputCanvas.width;
|
|
parseFloat(outputCanvas.style.width) || outputCanvas.width;
|
|
|
- const canvasHeight =
|
|
|
|
|
|
|
+ const cssHeight =
|
|
|
parseFloat(outputCanvas.style.height) || outputCanvas.height;
|
|
parseFloat(outputCanvas.style.height) || outputCanvas.height;
|
|
|
|
|
|
|
|
|
|
+ // 获取高清图片数据,使用最高质量
|
|
|
|
|
+ const imgData = outputCanvas.toDataURL('image/png', 1.0);
|
|
|
|
|
+
|
|
|
// 创建 PDF 实例,横向或纵向根据 Canvas 尺寸决定
|
|
// 创建 PDF 实例,横向或纵向根据 Canvas 尺寸决定
|
|
|
- const orientation = canvasWidth > canvasHeight ? 'l' : 'p';
|
|
|
|
|
- // 使用 'mm' 单位,并根据 96 DPI 转换为毫米
|
|
|
|
|
- // 96 DPI 下:1px = 25.4 / 96 mm ≈ 0.2646 mm
|
|
|
|
|
|
|
+ const orientation = cssWidth > cssHeight ? 'l' : 'p';
|
|
|
|
|
+ // 使用 'mm' 单位,并根据 CSS 尺寸转换为毫米(保持显示比例)
|
|
|
|
|
+ // 屏幕 DPI 约 96,1px = 25.4 / 96 mm ≈ 0.2646 mm
|
|
|
const DPI = 96;
|
|
const DPI = 96;
|
|
|
const pxToMm = 25.4 / DPI;
|
|
const pxToMm = 25.4 / DPI;
|
|
|
- const pdfWidth = canvasWidth * pxToMm;
|
|
|
|
|
- const pdfHeight = canvasHeight * pxToMm;
|
|
|
|
|
|
|
+ const pdfWidth = cssWidth * pxToMm;
|
|
|
|
|
+ const pdfHeight = cssHeight * pxToMm;
|
|
|
|
|
|
|
|
const pdf = new jsPDF(orientation, 'mm', [pdfWidth, pdfHeight]);
|
|
const pdf = new jsPDF(orientation, 'mm', [pdfWidth, pdfHeight]);
|
|
|
|
|
|
|
@@ -935,13 +938,12 @@
|
|
|
if (!targetElement) return;
|
|
if (!targetElement) return;
|
|
|
|
|
|
|
|
const newCanvas = await html2canvas(targetElement, {
|
|
const newCanvas = await html2canvas(targetElement, {
|
|
|
- scale: 1,
|
|
|
|
|
|
|
+ scale: 2,
|
|
|
backgroundColor: '#ffffff',
|
|
backgroundColor: '#ffffff',
|
|
|
useCORS: true,
|
|
useCORS: true,
|
|
|
logging: false,
|
|
logging: false,
|
|
|
allowTaint: false,
|
|
allowTaint: false,
|
|
|
imageTimeout: 5000,
|
|
imageTimeout: 5000,
|
|
|
- width: 1000,
|
|
|
|
|
windowWidth: targetElement.scrollWidth,
|
|
windowWidth: targetElement.scrollWidth,
|
|
|
windowHeight: targetElement.scrollHeight
|
|
windowHeight: targetElement.scrollHeight
|
|
|
});
|
|
});
|