模型外包网站,微商如何做网站引流,wordpress close,怎么使用源码建网站文章目录 1 在线编辑1.1 PageOffice简介1.2 前端项目1.2.1 配置1.2.2 页面部分 1.3 后端项目1.3.1 pom.xml1.3.2 添加配置1.3.3 controller 2 在线预览2.1 引言2.2 市面上现有的文件预览服务2.2.1 微软2.2.2 Google Drive查看器2.2.3 阿里云 IMM2.2.4 XDOC 文档预览2.2.5 Offic… 文章目录 1 在线编辑1.1 PageOffice简介1.2 前端项目1.2.1 配置1.2.2 页面部分 1.3 后端项目1.3.1 pom.xml1.3.2 添加配置1.3.3 controller 2 在线预览2.1 引言2.2 市面上现有的文件预览服务2.2.1 微软2.2.2 Google Drive查看器2.2.3 阿里云 IMM2.2.4 XDOC 文档预览2.2.5 Office Web 3652.2.6 WPS开放平台 2.3 前端处理方案2.3.1 pptx的预览方案2.3.2 pdf的预览方案2.3.2.1 iframe和embed2.3.2.2 pdfjs 2.3.3 docx的预览方案2.3.4 前端预览方案总结 2.4 服务端预览方案2.4.1 openOffice2.4.2 kkFileView2.4.3 onlyOffice 1 在线编辑
1.1 PageOffice简介
PageOffice是一款在线的office编辑软件帮助Web应用系统或Web网站实现用户在线编辑Word、Excel、PowerPoint文档。可以完美实现在线公文流转领导批阅盖章。可以给文件添加水印在线安全预览防止用户下载和复制文件等
1.2 前端项目
由于pageoffice浏览器是ie内核vue3不兼容ie。所以需要把页面放在后端
1.2.1 配置
在 vue.config.js 中配置代理
devServer: {proxy: {/api: {target: http://localhost:8081/samples-springboot-back, ///api对应后端项目http://localhost:8081/samples-springboot-back地址 ws: true,changeOrigin: true, // 允许跨域pathRewrite: {^/api: // 标识替换使用 /api 代替真实的接口地址}}}}1.2.2 页面部分
在index.html页面引用后端项目samples-springboot-back根目录下的pageoffice.js
script typetext/javascript srchttp://localhost:8081/samples-springboot-back/pageoffice.js/script在index.vue页面添加一个按钮调用POBrowser.openWindowModeless请求后端。http://localhost:8081/springboot-pageoffice-demo/SimpleWord/Word2 是后端打开文件的controller
POBrowser.openWindowModeless(http://localhost:8081/springboot-pageoffice-demo/SimpleWord/Word2, width1150px;height900px;);在Word.vue页面created中通过axios请求后台获取pageoffice控件注意后台返回string字符串前端需要使用v-html解析
这里给后台发请求的是axios如果需要添加token可以在main.js中配置拦截器给请求添加token
Word.vue页面可以直接复制后修改url
templatediv classWorddiv styleheight: 800px; width: auto v-htmlpoHtmlCode //div
/template
script
const axios require(axios);
export default {name: Word,data() {return {poHtmlCode: ,};},created: function () {axios.post(/api/SimpleWord/Word).then((response) {this.poHtmlCode response.data;}).catch(function (err) {console.log(err);});},methods: {//控件中的一些常用方法都在这里调用比如保存打印等等/*** Save()方法是/api/SimpleWord/Word这个后台controller中PageOfficeCtrl控件通过poCtrl.addCustomToolButton定义的方法除了保存还有另存到本地、打印等功能。*/Save() {document.getElementById(PageOfficeCtrl1).WebSave();}},mounted: function () {// 将PageOffice控件中的方法通过mounted挂载到window对象上只有挂载后才能被vue组件识别window.Save this.Save;},
};
/script1.3 后端项目
1.3.1 pom.xml
dependencygroupIdcom.zhuozhengsoft/groupIdartifactIdpageoffice/artifactIdversion5.4.0.3/version
/dependency1.3.2 添加配置
在启动类中配置servlet beanpoSysPath 是在 properites 中配置的磁盘路径注意pageoffice的poserver.zz等这些请求不要拦截get和post请求都放出来
Bean
public ServletRegistrationBean pageofficeRegistrationBean() {com.zhuozhengsoft.pageoffice.poserver.Server poserver new com.zhuozhengsoft.pageoffice.poserver.Server();poserver.setSysPath(poSysPath);//设置PageOffice注册成功后,license.lic文件存放的目录ServletRegistrationBean srb new ServletRegistrationBean(poserver);srb.addUrlMappings(/poserver.zz);srb.addUrlMappings(/posetup.exe);srb.addUrlMappings(/pageoffice.js);srb.addUrlMappings(/jquery.min.js);srb.addUrlMappings(/pobstyle.css);srb.addUrlMappings(/sealsetup.exe);return srb;
}1.3.3 controller
打开文件的controllerwebopen第一个参数是当前文件的磁盘路径磁盘路径必须反向双斜杠。
setServerPage和setSaveFilePage中的api是前端代理前后端分离项目必须配置代理
RestController
RequestMapping(value /SimpleWord)
public class SimpleWordController { RequestMapping(value/Word)public String showWord(HttpServletRequest request) {PageOfficeCtrl poCtrl new PageOfficeCtrl(request);poCtrl.setServerPage(/api/poserver.zz);//设置服务页面poCtrl.addCustomToolButton(保存, Save, 1);poCtrl.setSaveFilePage(/api/SimpleWord/save);//设置保存方法的url//打开wordpoCtrl.webOpen(D:\\doc\\test.docx, OpenModeType.docNormalEdit, 张三);return poCtrl.getHtmlCode(PageOfficeCtrl1);}RequestMapping(save)public void save(HttpServletRequest request, HttpServletResponse response) { FileSaver fs new FileSaver(request, response);fs.saveToFile(D:\\doc\\ fs.getFileName());fs.close();} }2 在线预览
2.1 引言
最近遇到了文件预览的需求但一搜索发现这还不是一个简单的功能。于是又去查询了很多资料调研了一些方案也踩了好多坑。最后总结方案如下
花钱解决(使用市面上现有的文件预览服务) 微软google阿里云 IMMXDOCOffice Web 365wps开放平台前端方案 pptx的预览方案pdf的预览方案docx的预览方案xlsx(excel)的预览方案服务端方案 openOfficekkFileViewonlyOffice
2.2 市面上现有的文件预览服务
2.2.1 微软
docx,pptx,xlsx可以说是office三件套那自然得看一下微软官方提供的文件预览服务。使用方法特别简单只需要将文件链接拼接到参数后面即可。 记得encodeURL https://view.officeapps.live.com/op/view.aspx?src${encodeURIComponent(url)}
对于docx,pptx,xlsx都有较好的支持pdf不行。 还有一个坑点是这个服务是否稳定有什么限制是否收费都查不到一个定论。在office官方网站上甚至找不到介绍这个东西的地方。
目前只能找到一个QAanswers.microsoft.com/en-us/msoff…[1]
微软官方人员回答表示 翻译翻译就是几乎永久使用没有收费计划不会存储预览的文件数据限制文件10MB建议用于 查看互联网上公开的文件。 但经过某些用户测试发现使用了微软的文件预览服务然后删除了文件地址仍然可访问但过一段时间才会失效。
2.2.2 Google Drive查看器
接入简单同 Office Web Viewer只需要把 src 改为https://drive.google.com/viewer?url${encodeURIComponent(url)}即可。
限制25MB,支持以下格式
测试效果支持docx,pptx,xlsx,pdf预览但pptx预览的效果不如微软没有动画效果样式有小部分会错乱。
2.2.3 阿里云 IMM
官方文档如下https://help.aliyun.com/zh/imm/?spm5176.28426678.J_HeJR_wZokYt378dwP-lLl.1.59575181eAvyQZscm20140722.S_help文档62354.S_BB1blBB2blRQWag0hotos0.ID_62354-RL_智能媒体管理-LOC_search~UND~helpdoc~UND~item-OR_ser-V_3-P0_0 付费使用
2.2.4 XDOC 文档预览
说了一些大厂的在介绍一些其他的需要自行分辨 官网地址view.xdocin.com/view-xdocin…[3]
2.2.5 Office Web 365
需要注意的是虽然名字很像office但我们看网页的Copyright可以发现其实是一个西安的公司不是微软但毕竟也提供了文件预览的服务 官网地址www.officeweb365.com/[4]
2.2.6 WPS开放平台
官方地址solution.wps.cn/[5] 付费使用价格如下
2.3 前端处理方案
2.3.1 pptx的预览方案
先查一下有没有现成的轮子目前 pptx 的开源预览方案能找到的只有这个github.com/g21589/PPTX…[6] 。但已经六七年没有更新也没有维护笔者使用的时候发现有很多兼容性问题。 简单来说就是没有。 对于这种情况我们可以自行解析主要步骤如下
查询pptx的国际标准解析pptx文件渲染成html或者canvas进行展示
我们先去找一下pptx的国际标准官方地址officeopenxml[7] 先解释下什么是officeopenxml: Office OpenXML也称为OpenXML或OOXML是一种基于XML的办公文档格式包括文字处理文档、电子表格、演示文稿以及图表、图表、形状和其他图形材料。该规范由微软开发并于2006年被ECMA国际采用为ECMA-376。第二个版本于2008年12月发布第三个版本于2011年6月发布。该规范已被ISO和IEC采用为ISO/IEC 29500。 虽然Microsoft继续支持较旧的二进制格式(.doc、.xls和.ppt)但OOXML现在是所有Microsoft Office文档(.docx、.xlsx和.pptx)的默认格式。 由此可见Office OpenXML由微软开发目前已经是国际标准。 接下来我们看一下pptx里面有哪些内容具体可以看pptx的官方标准officeopenxml-pptx[8] PresentationML或.pptx文件是一个zip文件其中包含许多“部分”通常是UTF-8或UTF-16编码或XML文件。该包还可能包含其他媒体文件例如图像。该结构根据 OOXML 标准 ECMA-376 第 2 部分中概述的开放打包约定进行组织。 根据国际标准我们知道pptx文件本质就是一个zip文件其中包含许多部分 部件的数量和类型将根据演示文稿中的内容而有所不同但始终会有一个 [Content_Types].xml、一个或多个关系 .rels 部件和一个演示文稿部件演示文稿.xml它位于 ppt 文件夹中用于Microsoft Powerpoint 文件。通常还将至少有一个幻灯片部件以及一张母版幻灯片和一张版式幻灯片从中形成幻灯片。 那么js如何读取zip呢 找到一个工具: www.npmjs.com/package/jsz…[9] 于是我们可以开始尝试解析pptx了。
import JSZip from jszip
// 加载pptx数据
const zip await JSZip.loadAsync(pptxData)解析[Content_Types].xml 每个pptx必然会有一个 [Content_Types].xml。此文件包含包中部件的所有内容类型的列表。每个部件及其类型都必须列在 [Content_Types].xml 中。通过它里面的内容可以解析其他的文件数据
const filesInfo await getContentTypes(zip)async function getContentTypes(zip: JSZip) {const ContentTypesJson await readXmlFile(zip, [Content_Types].xml)const subObj ContentTypesJson[Types][Override]const slidesLocArray []const slideLayoutsLocArray []for (let i 0; i subObj.length; i) {switch (subObj[i][attrs][ContentType]) {case application/vnd.openxmlformats-officedocument.presentationml.slidexml:slidesLocArray.push(subObj[i][attrs][PartName].substr(1))breakcase application/vnd.openxmlformats-officedocument.presentationml.slideLayoutxml:slideLayoutsLocArray.push(subObj[i][attrs][PartName].substr(1))breakdefault:}}return {slides: slidesLocArray,slideLayouts: slideLayoutsLocArray,}}解析演示文稿 先获取ppt目录下的presentation.xml演示文稿的大小 由于演示文稿是xml格式要真正的读取内容需要执行 readXmlFile
const slideSize await getSlideSize(zip)async function getSlideSize(zip: JSZip) {const content await readXmlFile(zip, ppt/presentation.xml)const sldSzAttrs content[p:presentation][p:sldSz][attrs]return {width: (parseInt(sldSzAttrs[cx]) * 96) / 914400,height: (parseInt(sldSzAttrs[cy]) * 96) / 914400,}}加载主题 根据 officeopenxml的标准解释 每个包都包含一个关系部件用于定义其他部件之间的关系以及与包外部资源的关系。这样可以将关系与内容分开并且可以轻松地更改关系而无需更改引用目标的源。 除了包的关系部分之外作为一个或多个关系源的每个部件都有自己的关系部分。每个这样的关系部件都可以在部件的_rels子文件夹中找到并通过在部件名称后附加“.rels”来命名。 其中主题的相关信息就在ppt/_rels/presentation.xml.rels中 async function loadTheme(zip: JSZip) {const preResContent await readXmlFile(zip,ppt/_rels/presentation.xml.rels,)const relationshipArray preResContent[Relationships][Relationship]let themeURIif (relationshipArray.constructor Array) {for (let i 0; i relationshipArray.length; i) {if (relationshipArray[i][attrs][Type] http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme) {themeURI relationshipArray[i][attrs][Target]break}}} else if (relationshipArray[attrs][Type] http://schemas.openxmlformats.org/officeDocument/2006/relationships/theme) {themeURI relationshipArray[attrs][Target]}if (themeURI undefined) {throw Error(Cant open theme file.)}return readXmlFile(zip, ppt/ themeURI)}2.3.2 pdf的预览方案
2.3.2.1 iframe和embed
pdf 比较特别一般的浏览器默认支持预览pdf。因此我们可以使用浏览器的能力iframe srcviewFileUrl / 但这样就完全依赖浏览器对PDF的展示交互是否支持全看浏览器的能力且不同的浏览器展示和交互往往不同如果需要统一的话最好还是尝试其他方案。 embed的解析方式也是一样这里不举例子了
2.3.2.2 pdfjs
npm: www.npmjs.com/package/pdf…[12]
github地址github.com/mozilla/pdf…[13]由mozilla出品就是我们常见的MDN的老大。而且目前 火狐浏览器 使用的 PDF 预览就是采用这个我们可以用火狐浏览器打开pdf文件查看浏览器使用的js就能发现
需要注意的是最新版 pdf.js 限制了 node 版本需要大于等于18 github链接github.com/mozilla/pdf…
如果你项目node版本小于这个情况可能会无法使用。
具体使用情况如下
import * as pdfjs from pdfjs-dist
import * as pdfjsWorker from pdfjs-dist/build/pdf.work.entryinterface Viewport {width: numberheight: numberviewBox: Arraynumber
}interface RenderContext {canvasContext: CanvasRenderingContext2D | nulltransform: Arraynumberviewport: Viewport
}interface PDFPageProxy {pageNumber: numbergetViewport: () Viewportrender: (options: RenderContext) void
}interface PDFDocumentProxy {numPages: numbergetPage: (x: number) PromisePDFPageProxy
}class PdfPreview {private pdfDoc: PDFDocumentProxy | undefinedpageNumber: numbertotal: numberdom: HTMLElementpdf: string | ArrayBufferconstructor(pdf: string | ArrayBuffer, dom: HTMLElement | undefined) {this.pageNumber 1this.total 0this.pdfDoc undefinedthis.pdf pdfthis.dom dom ? dom : document.body}private getPdfPage (number: number) {return new Promise((resolve, reject) {if (this.pdfDoc) {this.pdfDoc.getPage(number).then((page: PDFPageProxy) {const viewport page.getViewport()const canvas document.createElement(canvas)this.dom.appendChild(canvas)const context canvas.getContext(2d)const [_, __, width, height] viewport.viewBoxcanvas.width widthcanvas.height heightviewport.width widthviewport.height heightcanvas.style.width Math.floor(viewport.width) pxcanvas.style.height Math.floor(viewport.height) pxconst renderContext {canvasContext: context,viewport: viewport,transform: [1, 0, 0, -1, 0, viewport.height],}page.render(renderContext)resolve({ success: true, data: page })})} else {reject({ success: false, data: null, message: pdfDoc is undefined })}})}pdfPreview () {window.pdfjsLib.GlobalWorkerOptions.workerSrc pdfjsWorkerwindow.pdfjsLib.getDocument(this.pdf).promise.then(async (doc: PDFDocumentProxy) {this.pdfDoc docthis.total doc.numPagesfor (let i 1; i this.total; i) {await this.getPdfPage(i)}})}prevPage () {if (this.pageNumber 1) {this.pageNumber - 1} else {this.pageNumber 1}this.getPdfPage(this.pageNumber)}nextPage () {if (this.pageNumber this.total) {this.pageNumber 1} else {this.pageNumber this.total}this.getPdfPage(this.pageNumber)}
}const createReader (file: File): Promisestring | ArrayBuffer | null {return new Promise((resolve, reject) {const reader new FileReader()reader.readAsDataURL(file)reader.onload () {resolve(reader.result)}reader.onerror (error) {reject(error)}reader.onabort (abort) {reject(abort)}})
}export const renderPdf async (file: File,dom?: HTMLElement,
): Promisevoid {try {if (typeof window ! undefined) {const pdf await createReader(file)if (pdf) {const PDF new PdfPreview(pdf, dom)PDF.pdfPreview()}}} catch (error) {console.log(renderPdf, error)}
}2.3.3 docx的预览方案
我们可以去查看docx的国际标准去解析文件格式渲染成html和canvas不过比较好的是已经有人这么做了还开源了
使用方法如下
import { renderAsync } from docx-previewinterface DocxOptions {bodyContainer?: HTMLElement | nullstyleContainer?: HTMLElementbuffer: BlobdocxOptions?: PartialRecordstring, string | boolean
}export const renderDocx (options: DocxOptions): Promisevoid | undefined {if (typeof window ! undefined) {const { bodyContainer, styleContainer, buffer, docxOptions {} } optionsconst defaultOptions {className: docx,ignoreLastRenderedPageBreak: false,}const configuration Object.assign({}, defaultOptions, docxOptions)if (bodyContainer) {return renderAsync(buffer, bodyContainer, styleContainer, configuration)} else {const contain document.createElement(div)document.body.appendChild(contain)return renderAsync(buffer, contain, styleContainer, configuration)}}
}2.3.4 前端预览方案总结
我们对以上找到的优秀的解决方案进行改进和总结并封装成一个web components组件preview组件
为什么是web components组件 因为它跟框架无关可以在任何框架中使用且使用起来跟原生的div标签一样方便。并编写使用文档: preview组件文档 文档支持交互体验。
目前docx,pdf,xlsx预览基本可以了都是最好的方案。pptx预览效果不太好因为需要自行解析。
2.4 服务端预览方案
2.4.1 openOffice
由于浏览器不能直接打开 docx,pptx,xlsx 等格式文件但可以直接打开pdf和图片因此我们可以换一个思路用服务端去转换下文件的格式转换成浏览器能识别的格式然后再让浏览器打开这不就OK了吗甚至不需要前端处理了。 我们可以借助openOffice的能力先介绍一下openOffice: Apache OpenOffice是领先的开源办公软件套件用于文字处理电子表格演示文稿图形数据库等。它有多种语言版本适用于所有常用计算机。它以国际开放标准格式存储您的所有数据还可以从其他常见的办公软件包中读取和写入文件。它可以出于任何目的完全免费下载和使用。 官网如下www.openoffice.org 完整示例如下
package org.example;import org.artofsolving.jodconverter.OfficeDocumentConverter;
import org.artofsolving.jodconverter.office.DefaultOfficeManagerConfiguration;
import org.artofsolving.jodconverter.office.OfficeManager;import java.io.File;public class OfficeUtil {private static OfficeManager officeManager;private static int port[] {8100};/*** start openOffice service.*/public static void startService() {DefaultOfficeManagerConfiguration configuration new DefaultOfficeManagerConfiguration();try {System.out.println(准备启动office转换服务....);configuration.setOfficeHome(这里的路径一般为C:\\Program Files (x86)\\OpenOffice 4的bin目录);configuration.setPortNumbers(port); // 设置转换端口默认为8100configuration.setTaskExecutionTimeout(1000 * 60 * 30L);// 设置任务执行超时为30分钟configuration.setTaskQueueTimeout(1000 * 60 * 60 * 24L);// 设置任务队列超时为24小时officeManager configuration.buildOfficeManager();officeManager.start(); // 启动服务System.out.println(office转换服务启动成功!);} catch (Exception e) {System.out.println(office转换服务启动失败!详细信息: e);}}/*** stop openOffice service.*/public static void stopService() {System.out.println(准备关闭office转换服务....);if (officeManager ! null) {officeManager.stop();}System.out.println(office转换服务关闭成功!);}public static void convertToPDF(String inputFile, String outputFile) {startService();System.out.println(进行文档转换转换: inputFile -- outputFile);OfficeDocumentConverter converter new OfficeDocumentConverter(officeManager);converter.convert(new File(inputFile), new File(outputFile));stopService();}public static void main(String[] args) {convertToPDF(/Users/koolearn/Desktop/asdf.docx, /Users/koolearn/Desktop/adsf.pdf);}
}2.4.2 kkFileView
支持的文件预览格式非常丰富图片 安装下libreoffice : kkFileView明确要求的额外依赖 libreoffice否则无法启动
启动项目 找到主文件主函数mian即可执行
2.4.3 onlyOffice
官网地址https://www.onlyoffice.com/zh 开发者版本和社区版免费企业版付费www.onlyoffice.com/zh/docs-ent
预览的文件种类没有kkFileView多但对office三件套有很好的支持甚至支持多人编辑。
