Vue导出Word文档：解决大图片显示不全问题
在Vue项目中，使用html-docx-js和file-saver等插件导出包含图片的Word文档时，常常遇到大图片显示不全的问题。本文将提供几种解决方案。
开发环境： Vue + Element UI
问题描述： 导出Word文档时，长图无法完整显示，只能缩小后查看。直接调整图片样式效果不佳。
解决方案：
立即学习“前端免费学习笔记（深入）”；
以下方法可有效解决大图片显示不全问题：
- 预处理图片： 在导出前，使用JavaScript调整图片大小。以下代码片段展示了如何根据最大宽高缩放图片：
async function resizeImage(base64Str, maxWidth, maxHeight) {
return new Promise(resolve => {
const img = new Image();
img.onload = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
let width = img.width;
let height = img.height;
// 保持长宽比缩放
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
resolve(canvas.toDataURL());
};
img.src = base64Str;
});
}
在导出前，调用resizeImage函数处理图片，再将处理后的图片嵌入HTML字符串中。
-
采用PDF格式： PDF格式对大图片的支持更好。可以使用
jsPDF和html2canvas库将HTML内容导出为PDF：
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
async function exportToPDF(htmlElementId, title) {
const pdf = new jsPDF('l', 'pt', 'a4'); // 横向，点为单位，A4纸张
const canvas = await html2canvas(document.getElementById(htmlElementId));
const imgData = canvas.toDataURL('image/png');
const imgWidth = pdf.internal.pageSize.getWidth();
const imgHeight = canvas.height * imgWidth / canvas.width;
let heightLeft = imgHeight;
let position = 0;
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pdf.internal.pageSize.getHeight();
while (heightLeft > 0) {
position -= pdf.internal.pageSize.getHeight();
pdf.addPage();
pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
heightLeft -= pdf.internal.pageSize.getHeight();
}
pdf.save(`${title}.pdf`);
}
此方法可处理超过一页的长图。
- 调整Word文档页面设置： 在导出时，修改Word文档的页面设置，例如增大页边距或使用更大尺寸的纸张(A3)：
downloadWord(htmlStr, title) {
let page = `
@page { size: A3 landscape; margin: 2cm; }
${htmlStr}`;
saveAs(htmlDocx.asBlob(page, { orientation: "landscape" }), `${title}.doc`);
}
通过以上方法，可以有效解决Vue项目导出Word文档时大图片显示不全的问题，选择最适合项目需求的方案即可。
