vue+onlyoffice实现编辑和预览

基本配置使用

1 index.html引入后台配置好的office服务器

<script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script>

2 封装组件

<template><div id="monitorOffice"></div>
</template>
<script>
import {handleDocType} from "../common/utils"export default {props: {option: {type: Object,default: () => {return {}}}},data() {return {doctype: ''}},mounted() {if (this.option.url)this.setEditor(this.option)},methods: {setEditor(option) {this.doctype = handleDocType(option.fileType);// office配置参数let config = {document: {fileType: option.fileType,key: "",title: option.title,permissions: {comment: false,download: false,modifyContentControl: true,modifyFilter: true,print: false,edit: option.isEdit,//是否可以编辑: 只能查看，传false// "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。// "review": true //跟踪变化},url: option.url},documentType: this.doctype,editorConfig: {callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置lang: "zh",//语言设置customization: {autosave: false,//是否自动保存chat: false,comments: false,help: false,// "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为falselogo: {image: "https://file.iviewui.com/icon/viewlogo.png",imageEmbedded: "https://file.iviewui.com/icon/viewlogo.png",},spellcheck: true,//拼写检查},},width: "100%",height: "100%",};let docEditor = new DocsAPI.DocEditor("monitorOffice", config);},},watch: {option: {handler: function (n, o) {this.setEditor(n);this.doctype = handleDocType(n.fileType);},deep: true,}}}
</script>

3配置项参考官网示例

4 开始使用（编辑+查看两个功能）

1.编辑

<template><div class="monitor-report"><Upload ref="upload" accept=".doc,.docx" :action="action" :headers="header" :format="['doc','docx']":on-success="handleSuccess":show-upload-list="false" :before-upload="handleBeforeUpload" :on-format-error="handleFormatError"><Button :loading="loading" class="up-class">上传</Button><span>（文件格式为：doc,docx）</span></Upload><div class="office" v-if="pageLoading"><MonitorOffice :option="option"></MonitorOffice></div></div>
</template>
<script>// jsimport axios from "axios"import {GetMonitorReport} from "./api/template"import {USER_NAME_SESSION, USER_ID_SESSION} from "./common/storage";// 组件import MonitorOffice from "./components/monitor-office"export default {components: {MonitorOffice},data() {return {// 上传文件参数header: {Authorization: `bearer${sessionStorage.getItem("token")}`,},action: axios.defaults.baseURL + "/report/document/template",file: null,loading: false,// office配置参数option: {url: "",isEdit: false,fileType: "",title: ""},pageLoading: false}},mounted() {this.init();},methods: {init() {this.GetMonitorReport();},// 上传文件的格式验证handleFormatError(file) {this.$Message.warning(file.name + '格式不正确');this.loading = false;},// 上传之前handleBeforeUpload(file) {this.file = file;this.onUpload();return false;},onUpload() {this.loading = true;let _baseURL = axios.defaults.baseURL;this.action = `${_baseURL}/report/document/template`;setTimeout(() => {this.$refs.upload.post(this.file);}, 1000)},// 导入成功时handleSuccess(res) {this.loading = false;if (res.status) {this.$Message.success("上传成功");// 这里重新上传文件，only office不会覆盖，所以先刷新解决// location.reload();this.GetMonitorReport();}},// 获取项目下监察报告模板GetMonitorReport() {this.pageLoading = falseGetMonitorReport().then(res => {if (res.status) {let data = res.data;if (data) {this.option = {url: data.fileViewPath,fileType: data.fileType,title: "",isEdit: false,}}this.pageLoading = true}})}}}
</script>
<style lang="less" scoped>.monitor-report {.up-class {margin-bottom: 10px;}.office {height: 100vh;}}
</style>

2.查看

通过文件id请求查看文件

5 配置项中documentType 动态设置

export function handleDocType(fileType) {let docType = '';let fileTypesDoc = ['doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps'];let fileTypesCsv = ['csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'];let fileTypesPPt = ['fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx'];if (fileTypesDoc.includes(fileType)) {docType = 'text'}if (fileTypesCsv.includes(fileType)) {docType = 'spreadsheet'}if (fileTypesPPt.includes(fileType)) {docType = 'presentation'}return docType;
}

vue+onlyoffice实现编辑和预览相关推荐

vue富文本编辑，编辑自动预览，单个图片上传不能预览的问题解决：
vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: 参考文章: (1)vue富文本编辑,编辑自动预览,单个图片上传不能预览的问题解决: (2)https://www.cnblogs.co ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
富文本编辑器：Typora（编辑与预览一体化）
富文本编辑器:Typora(编辑与预览一体化) 资源: 官网: https://www.typora.io/ 官网下载:点击下载使用教程:https://blog.csdn.net/mus123/a ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
vue移动端实现图片预览
接着上文的文件上传.下载.删除继续往下说,我们先说移动端的图片格式预览上文说到了vue引用了vant插件,是一个很好用的移动端开发组件,它自带了上传文件的方法,当然也带了图片预览的方法图片预览其实 ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
vue实现移动端图片预览
vue实现移动端图片预览 1.安装插件 2.main引入 3.使用注意扩展通过使用vue-photo-preview插件,实现移动端图片的预览,全屏等功能. 1.安装插件 npm install ...
前端vue利用flexpaper实现在线预览
前端vue利用flexpaper实现在线预览下载flexpaper 只需要用到js文件和FlexPaperViewer.swf: flexpaper_flash_debug.js flexpaper ...
团队协作三、OnlyOffice 实现文件在线预览和编辑
文档在线预览,最好都安装到本机,成功的机率大对于大多数开源的网盘软件来说,文档(docx,doc,txt,pdf,xls等)不能在线预览,给网盘软件的使用带来了不变. 插件下载地址 https:// ...

vue+onlyoffice实现编辑和预览

基本配置使用

1 index.html引入后台配置好的office服务器

2 封装组件

3配置项参考官网示例

4 开始使用（编辑+查看两个功能）

1.编辑

2.查看

5 配置项中documentType 动态设置

vue+onlyoffice实现编辑和预览相关推荐

最新文章

热门文章