如何使用JavaScript向生成的Word文件中插入服务器本地硬盘存储的图片

你当前采用的是「HTML结构封装为Word文档」的实现逻辑，Word原生支持内嵌Base64格式的图片，不需要依赖外部网络资源，只要把服务器本地存储的图片转成Base64字符串嵌入到HTML模板里即可，具体步骤如下：

1. 服务端读取本地图片转Base64编码 #

首先在服务端读取硬盘上的目标图片文件，编码为Base64格式，拼接对应图片类型的MIME前缀后返回给前端即可。
如果是Node.js服务端，可以参考如下代码实现：

const fs = require('fs');
// 填写服务器硬盘上的图片物理路径
const imgPath = '/data/upload/xxx.png';
const imgBuffer = fs.readFileSync(imgPath);
// 拼接MIME前缀，jpg格式对应修改为image/jpeg
const imgBase64 = `data:image/png;base64,${imgBuffer.toString('base64')}`;
// 把imgBase64返回给前端使用

2. 前端嵌入Base64图片到Word模板 #

在你的HTML模板需要插入图片的位置，直接写入<img>标签，src属性直接赋值为服务端返回的Base64字符串即可，修改你的导出代码示例如下：

// 假设你已经通过接口请求拿到了服务端返回的imgBase64变量
const docContent = `
<p>这是自定义文档内容</p>
<img src="${imgBase64}" width="600" style="display:block;margin:10px 0;">
<p>这是图片下方的内容</p>
`;

var charset = document.characterSet || document.charset;
// 替换原来的内容部分即可
saveAs(new Blob(["\ufeff", templateHeader + docContent + templateFooter], {
    type: 'application/msword;charset='+ charset,
    encoding: charset
}), "filename" + '.doc');

注意事项 #

• 建议给<img>标签设置固定宽高，避免Word打开时图片尺寸溢出页面
• 图片文件不要过大，否则生成的Word文档体积会同步增大，打开速度变慢
• MIME类型需要和图片实际格式匹配，jpg格式对应设置为image/jpeg，png格式对应设置为image/png，否则可能出现图片无法显示的问题

内容的提问来源于stack exchange，提问作者Mariam