前端实现 word 转 png

由于 java 后端的 itext 库是收费版,公司安全部门发出安全警告,要求整改。

所以采用前端实现 word 文档转图片功能。

一、需求

上传 docx 文件,并生成 png 图片作为缩略图

二、分析

前端无法直接把 docx 文档转成图片格式

三、解决方案

既然直接转无法实现,那就采用迂回战术

  1. 先转成 html(用到库 docx-preview
  2. 再将 html 转成 canvas(用到库 html2canvas
  3. 最后将 canvas 转成 png

四、实现步骤:

  1. docx 文件转成 html 格式,并插入目标节点中

    安装 docx-preview 依赖: pnpm add docx-preview --save

jsx 复制代码
import { useEffect } from 'react';
import * as docx from 'docx-preview';

export default ({ file }) => {
  useEffect(() => {
    // file 为上传好的 docx 格式文件
    docx2Html(file);
  }, [file]);

  /**
   * @description: docx 文件转 html
   * @param {*} file: docx 格式文件
   * @return {*}
   */
  const docx2Html = file => {
    if (!file) {
      return;
    }
    // 只处理 docx 文件
    const suffix = file.name?.substr(file.name.lastIndexOf('.') + 1).toLowerCase();
    if (suffix !== 'docx') {
      return;
    }
    const htmlContentDom = document.querySelector('#htmlContent'); // 生成 html 后挂载的 dom 节点
    const docxOptions = Object.assign(docx.defaultOptions, {
      debug: true,
      experimental: true,
    });
    docx.renderAsync(file, htmlContentDom, null, docxOptions).then(() => {
      console.log('docx 转 html 完成');
    });
  };

  return <div id='htmlContent' />;
};

此时,在 idhtmlContent 的节点下,就可以看到转换后的 html 内容了

  1. html 转成 canvas

    安装 html2canvas 依赖: pnpm add html2canvas --save

jsx 复制代码
import html2canvas from 'html2canvas';

/**
 * @description: dom 元素转为图片
 * @return {*}
 */
const handleDom2Img = async () => {
  const htmlContentDom = document.querySelector('#htmlContent'); // 生成 html 后挂载的 dom 节点
  // 获取刚刚生成的 dom 元素
  const htmlContent = htmlContentDom.querySelectorAll('.docx-wrapper>section')[0]; // 需要生成图片的 html 内容
  // 创建 canvas 元素
  const canvasDom = document.createElement('canvas');

  // 获取 dom 宽高
  const w = parseInt(window.getComputedStyle(htmlContent).width, 10);
  // const h = parseInt(window.getComputedStyle(htmlContent).height, 10);

  // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
  const scale = window.devicePixelRatio; // 缩放比例
  canvasDom.width = w * scale; // 取文档宽度
  canvasDom.height = w * scale; // 缩略图是正方形,所以高度跟宽度保持一致

  // 按比例增加分辨率,将绘制内容放大对应比例
  const canvas = await html2canvas(htmlContent, {
    canvas: canvasDom,
    scale,
    useCORS: true,
  });
  return canvas;
};
  1. 将生成好的 canvas 转成 png 文件,并下载
jsx 复制代码
// 将 canvas 转为 base64 图片
const base64Str = canvas.toDataURL();

// 下载图片
const imgName = `图片_${new Date().valueOf()}`;
const aElement = document.createElement('a');
aElement.href = base64Str;
aElement.download = `${imgName}.png`;
document.body.appendChild(aElement);
aElement.click();
document.body.removeChild(aElement);
window.URL.revokeObjectURL(base64Str);
相关推荐
不想有bug的小菜鸟1 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238631 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559602 分钟前
前端代理,解决跨域问题讲解
前端
quitv7 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238116 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星18 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-37 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen41 分钟前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3