前端转换pptx文件，实现页面预览

这个实现转换的方法不是很好找首先你可以使用这个叫pptxjs的一个库，这个库我感觉比较古老但是能基本实现这个pptx的预览
 

// 使用 jQuery 调用 pptxToHtml
    $("#pptx").pptxToHtml({
      pptxFileUrl: url, // PPTX 文件地址
      slidesScale: "250%",
      slideMode: true,
      keyBoardShortCut: true,
      mediaProcess: true,
      loadingIndicator: {
        show: false, // 是否显示加载指示器
      },
      slideModeConfig: {
        first: 1, // 从第几页开始
        nav: false, // 显示导航
        showPlayPauseBtn: false, // 显示播放/暂停按钮
        autoSlide: 0, // 自动播放间隔时间（秒）
        loop: false, // 循环播放
      },
      mediaProcess: true, // 媒体处理
    });
这种的话，在你要展示的组件 当中去定义一下容器，然后获取pptx文件的url或者通过接口来的url都行，然后就用这个方法去加载就好了，其中要引入的文件是这些
<link rel="stylesheet" href="/css/nv.d3.min.css">
 <link rel="stylesheet" href="/css/pptxjs.css">
<script type="text/javascript" src="/PPTXjs/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="/PPTXjs/jszip.min.js"></script>
  <script type="text/javascript" src="/PPTXjs/filereader.js"></script>
  <script type="text/javascript" src="/PPTXjs/d3.min.js"></script>
  <script type="text/javascript" src="/PPTXjs/nv.d3.min.js"></script>
  <script type="text/javascript" src="/PPTXjs/pptxjs.js"></script>
  <script type="text/javascript" src="/PPTXjs/divs2slides.js"></script>

这个本人亲测还是有点小问题的，就是再处理pptx文件当中的字体格式布局的时候不是很晚完美，如果要求不是很严格可以尝试
第二个方法就是        import { parse } from "pptxtojson";通过这个库，可以去github上寻找一下
它的使用方法

import { parse } from 'pptxtojson'

const options = {
	slideFactor: 75 / 914400, // 幻灯片尺寸转换因子，默认 96 / 914400
	fontsizeFactor: 100 / 96, // 字号转换因子，默认 100 / 75
}

document.querySelector('input').addEventListener('change', evt => {
	const file = evt.target.files[0]
	
	const reader = new FileReader()
	reader.onload = async e => {
		const json = await parse(e.target.result, options)
		console.log(json)
	}
	reader.readAsArrayBuffer(file)
})
// 输出示例
{
	"slides": {
		"fill": {
			"type": "color",
			"value": "#FF0000"
		},
		"elements": [
			// element data list
		],
	},
	"size": {
		"width": 1280,
		"height": 720
	} 
}大致就是这样具体的配置可以上去看 pptxtojson这个库

然后我的使用方法
 

import { parse } from "pptxtojson";



const options = {

  slideFactor: 260 / 914400,

  fontsizeFactor: 100 / 100,

};//先去引入和配置一些，这个options具体看个人需求去，我这里是要进行分页所以搞得很大
然后就是把你要搞得url
const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    console.log("arrayBuffer:", arrayBuffer);
    const json = await parse(arrayBuffer, options);
    console.log("json:", json);
    renderSlides(json);
放进来转换成json数据

最后就是利用这个渲染函数去实现了
const renderSlides = (json) => {
  // 隐藏加载动画
  const loading = document.getElementById("loading");
  if (loading) {
    loading.style.display = "none";
  }
  const container = document.getElementById("slide-container");
  container.innerHTML = "";

  const slideWidth = json.size.width;
  const slideHeight = json.size.height;

  json.slides.forEach((slide, slideIndex) => {
    const slideElement = document.createElement("div");
    slideElement.className = "slide";
    slideElement.style.position = "relative";
    slideElement.style.width = `${slideWidth}px`;
    slideElement.style.height = `${slideHeight}px`;
    slideElement.style.border = "1px solid #ccc";
    slideElement.style.display = slideIndex === 0 ? "block" : "none"; // 初始时只显示第一页

    if (slide.fill) {
      slideElement.style.backgroundColor = slide.fill.color || "transparent";
    }

    slide.elements.forEach((element) => {
      const el = document.createElement(
        element.type === "image" ? "img" : "div"
      );
      el.style.position = "absolute";
      el.style.left = `${element.left}px`;
      el.style.top = `${element.top}px`;
      el.style.width = `${element.width}px`;
      el.style.height = `${element.height}px`;

      if (element.type === "image") {
        el.src = element.src;
        el.style.objectFit = "cover";
      } else if (element.type === "text") {
        el.innerHTML = element.content || "";

        // 基本样式
        el.style.color = element.borderColor || "#000";
        el.style.fontSize = element.fontSize ? `${element.fontSize}px` : "16px";
        el.style.fontFamily = element.fontFamily || "Arial";
        el.style.textAlign = "left"; // 默认左对齐

        // 处理 content 中的样式
        if (element.content) {
          // 使用临时容器解析文本内容中的样式
          const tempDiv = document.createElement("div");
          tempDiv.innerHTML = element.content || "";
          const span = tempDiv.querySelector("span");

          if (span) {
            el.innerHTML = span.innerHTML;
            el.style.color = span.style.color || el.style.color;
            el.style.fontSize = span.style.fontSize || el.style.fontSize;
            el.style.fontFamily = span.style.fontFamily || el.style.fontFamily;
            el.style.letterSpacing = span.style.letterSpacing || "normal"; // 处理字母间距
            el.style.fontWeight = span.style.fontWeight || "normal"; // 处理字体粗细
            el.style.fontStyle = span.style.fontStyle || "normal"; // 处理字体样式
          } else {
            el.innerHTML = element.content || "";
            el.style.textAlign = element.textAlign || el.style.textAlign;
            el.style.color = element.color || el.style.color;
            el.style.fontSize = element.fontSize
              ? `${element.fontSize}px`
              : "16px";
            el.style.fontFamily = element.fontFamily || el.style.fontFamily;
            el.style.fontWeight = element.fontWeight || el.style.fontWeight;
            el.style.fontStyle = element.fontStyle || el.style.fontStyle;
            el.style.letterSpacing = element.letterSpacing || "normal"; // 处理字母间距
            el.style.lineHeight = element.lineHeight || "1.2"; // 设置合理的行高
          }
        }
        el.style.textAlign = el.style.textAlign || el.style.textAlign;
        el.style.lineHeight = el.style.lineHeight || "1.2"; // 设置合理的行高
        // 设置 overflow 和 whiteSpace
        el.style.overflow = "auto"; // 允许文本内容自动换行
        el.style.whiteSpace = "normal"; // 允许文本内容正常换行
        el.style.wordWrap = "break-word"; // 强制长单词换行

        // 处理边框样式
        if (element.borderWidth > 0) {
          el.style.border = `${element.borderWidth}px ${element.borderType} ${
            element.borderColor || "#000"
          }`;
          el.style.boxSizing = "border-box"; // 确保边框不会影响元素大小
        }

        // 设置文本垂直对齐
        el.style.verticalAlign = element.vAlign || "middle";
      }

      slideElement.appendChild(el);
    });

    container.appendChild(slideElement);
  });

  // 添加事件监听器
  container.addEventListener("wheel", handleWheelEvent);
};
最终的效果的话，看各位的配置了