首页/文章/vue

vue3 + vite 在线预览docx, pdf, pptx

2024-04-10

273 字约 1 分钟

...

学习

一、内网

1.docx

使用docx-preview

安装插件

npm i docx-preview -S

引入依赖

import { renderAsync } from "docx-preview";let docx = import.meta.glob("docx-preview");

 v-if="['docx'].includes(detailItem.fileType)"//js部分 detailItem.value为当前文件的数据对象const previewfile = () => {  fetch(detailItem.value.filePath)      let docData = response.blob();      let docxDiv= document.getElementsByClassName("docxDiv");      renderAsync(docData, docxDiv[0], null, {        inWrapper: true, // 启用围绕文档内容渲染包装器        ignoreWidth: false, // 禁止页面渲染宽度        ignoreHeight: false, // 禁止页面渲染高度        ignoreFonts: false, // 禁止字体渲染        breakPages: true, // 在分页符上启用分页        ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页        experimental: false, //启用实验性功能（制表符停止计算）        trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除

2.pdf

使用vue3-pdf-app

安装插件

npm install vue3-pdf-app

引入依赖

import VuePdfApp from "vue3-pdf-app";import "vue3-pdf-app/dist/icons/main.css";

使用方法非常简单

// detailItem.filePath为文件路径<vue-pdf-app style="height: 100vh; width: 100vw" :pdf="detailItem.filePath"></vue-pdf-app>

3.pptx

使用pptx.js

首先需要下载pptx的文件

github:

pptx https://github.com/meshesha/PPTXjs

官网地址：PPTXjs https://pptx.js.org/

下载完成后放到public下的lib文件夹中, 然后在index.html中引入

<link rel="stylesheet" href="/lib/css/pptxjs.css"><link rel="stylesheet" href="/lib/css/nv.d3.min.css"> <script type="text/javascript" src="/lib/js/jquery-1.11.3.min.js"></script><script type="text/javascript" src="/lib/js/jszip.min.js"></script> <script type="text/javascript" src="/lib/js/filereader.js"></script> <script type="text/javascript" src="/lib/js/d3.min.js"></script> <script type="text/javascript" src="/lib/js/nv.d3.min.js"></script> <script type="text/javascript" src="/lib/js/dingbat.js"></script> <script type="text/javascript" src="/lib/js/pptxjs.js"></script><script type="text/javascript" src="/lib/js/divs2slides.js"></script>

使用：

<div id="pptx" v-if="detailItem.fileType === 'pptx'"></div>// js部分 jquery已在index.html中引入 无需另外安装const handlePPtx = () => {      pptxFileUrl: detailItem.value.filePath, //pptx文件地址

二、外网（文件地址须在公网环境下）

调用XDOC的服务

<iframe :src="'https://view.xdocin.com/view?src=https://test-jpfile1.oss-cn-shenzhen.aliyuncs.com//Bom/bom/2022/1/19/2022011911370824626513.pdf'"></iframe>

三、移动端适配

vue3-pdf-app会自动适配，主要是docx和pptx的适配问题

docx : 在文档加载完成后进行页面的缩放

renderAsync(docData, childRef[0], null, {        inWrapper: true, // 启用围绕文档内容渲染包装器        ignoreWidth: false, // 禁止页面渲染宽度        ignoreHeight: false, // 禁止页面渲染高度        ignoreFonts: false, // 禁止字体渲染        breakPages: true, // 在分页符上启用分页        ignoreLastRenderedPageBreak: true, //禁用lastRenderedPageBreak元素的分页        experimental: false, //启用实验性功能（制表符停止计算）        trimXmlDeclaration: true, //如果为真，xml声明将在解析之前从xml文档中删除        console.log("res---->", res);        let timer = setInterval(() => {          const $slides = $(".docx-wrapper");if ($slides.children().length) {            const slidesWidth = Math.max(              ...Array.from($slides.children()).map((s) => s.offsetWidth)            const $wrapper = $("#docRef");            const wrapperWidth = window.innerWidth;            const wrapperHeight = window.innerHeight;              transform: `scale(${wrapperWidth / slidesWidth})`,"transform-origin": "top left",              height: wrapperHeight * (1 / (wrapperWidth / slidesWidth)) + "px",

pptx: 跟doc同样的问题

await $("#pptx").pptxToHtml({pptxFileUrl: "/api" + detailItem.value.filePath, let timer = setInterval(() => {const $slides = $(".slides");if ($slides.children().length) {const slidesWidth = Math.max(        ...Array.from($slides.children()).map((s) => s.offsetWidth)const $wrapper = $("#pptx");const wrapperWidth = window.innerWidth;const wrapperHeight = window.innerHeight;transform: `scale(${wrapperWidth / slidesWidth})`,"transform-origin": "top left",height: wrapperHeight * (1 / (wrapperWidth / slidesWidth)) + "px",