node实现，下载html、pdf、html(html转word、pdf)

最新推荐文章于 2024-05-29 13:21:45 发布

是吱吱

最新推荐文章于 2024-05-29 13:21:45 发布

阅读量1.3k

点赞数 1

分类专栏： node

本文链接：https://blog.csdn.net/qq_41662017/article/details/117585262

版权

node 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近项目接到需求，要求下载html、word、pdf的文件，特此记录
前端：react(antd)
后端：node
包：jsdom、html-pdf、html-docx-js

<Button onClick={() => exportDownload('/后端处理api, {其他筛选逻辑}, '前端文件名');>下载</Button>

exportDownload () {
  其他筛选逻辑处理
  
  const downloadUrl = `后端文件处理api`;
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = 前端文件名;
  a.style.display = 'none';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

后端api
我们的html直接是字符串拼接起来的，变量htmlString为我们拼接的字符串
	  // 导出html
      const html = '<html><body>' + itemThtml + '</body></html>';
      ctx.body = html;
      type = 'html';
      ctx.set('content-type', 'application/octet-stream');
      // 导出word
      const docx = HtmlDocx.asBlob(html);
      ctx.body = docx;
      type = 'docx';
      ctx.set('content-type', 'application/msword');
      // 导出pdf
      const data = await new Promise((res, rej) => {
        pdf.create(html, {format: 'A4'}).toBuffer((err, buffer) => {
          if (err) rej(err);
          res(buffer);
        });
      });
      type = 'pdf';
      ctx.body = data;
      ctx.set('content-type', 'application/pdf');

注：

html中的canvas元素不能直接在word中显示，所以用JSDOM转成base64的图片，然后插入图片 const dom = new JSDOM(${HtmlString}, { runScripts: 'dangerously' });
转换之后在不同分辨率的wps中显示不同，但是在word中样式基本一致
筛选逻辑那里涉及数据库时间的：// 把客户端本地的 utc偏移量传给后端，后端才能把导出的时间变成客户端的本地时间 utcOffset: moment().utcOffset(),

是吱吱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
node实现，下载html、pdf、html(html转word、pdf)

最近项目接到需求，要求下载html、word、pdf的文件，特此记录前端：react(antd)后端：node包：jsdom、html-pdf、html-docx-js<Button onClick={() => exportDownload('/后端处理api, {其他筛选逻辑}, '前端文件名');>下载</Button>exportDownload () { 其他筛选逻辑处理 const downloadUrl = `后端文件处理api`;
复制链接

扫一扫