import { useEffect } from 'react';
import * as docx from 'docx-preview';

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

  /**
   * @description: docx 文件轉(zhuǎn) 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 節(jié)點
    const docxOptions = Object.assign(docx.defaultOptions, {
      debug: true,
      experimental: true,
    });
    docx.renderAsync(file, htmlContentDom, null, docxOptions).then(() => {
      console.log('docx 轉(zhuǎn) html 完成');
    });
  };

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

import html2canvas from 'html2canvas';

/**
 * @description: dom 元素轉(zhuǎn)為圖片
 * @return {*}
 */
const handleDom2Img = async () => {
  const htmlContentDom = document.querySelector('#htmlContent'); // 生成 html 后掛載的 dom 節(jié)點
  // 獲取剛剛生成的 dom 元素
  const htmlContent = htmlContentDom.querySelectorAll('.docx-wrapper>section')[0]; // 需要生成圖片的 html 內(nèi)容
  // 創(chuàng)建 canvas 元素
  const canvasDom = document.createElement('canvas');

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

  // 設(shè)定 canvas 元素屬性寬高為 DOM 節(jié)點寬高 * 像素比
  const scale = window.devicePixelRatio; // 縮放比例
  canvasDom.width = w * scale; // 取文檔寬度
  canvasDom.height = w * scale; // 縮略圖是正方形，所以高度跟寬度保持一致

  // 按比例增加分辨率，將繪制內(nèi)容放大對應(yīng)比例
  const canvas = await html2canvas(htmlContent, {
    canvas: canvasDom,
    scale,
    useCORS: true,
  });
  return canvas;
};

// 將 canvas 轉(zhuǎn)為 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);