index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <!--onlyoffice 编辑器-->
  2. <template>
  3. <div id='vabOnlyOffice'></div>
  4. </template>
  5. <script>
  6. export default {
  7. name: 'VabOnlyOffice',
  8. props: {
  9. option: {
  10. type: Object,
  11. default: () => {
  12. return {}
  13. },
  14. },
  15. },
  16. data() {
  17. return {
  18. doctype: '',
  19. docEditor: null,
  20. }
  21. },
  22. beforeDestroy() {
  23. if (this.docEditor !== null) {
  24. this.docEditor.destroyEditor();
  25. this.docEditor = null;
  26. }
  27. },
  28. watch: {
  29. option: {
  30. handler: function(n) {
  31. this.setEditor(n)
  32. this.doctype = this.getFileType(n.fileType)
  33. },
  34. deep: true,
  35. },
  36. },
  37. mounted() {
  38. if (this.option.url) {
  39. this.setEditor(this.option)
  40. }
  41. },
  42. methods: {
  43. async setEditor(option) {
  44. if (this.docEditor !== null) {
  45. this.docEditor.destroyEditor();
  46. this.docEditor = null;
  47. }
  48. this.doctype = this.getFileType(option.fileType)
  49. let config = {
  50. document: {
  51. //后缀
  52. fileType: option.fileType,
  53. key: option.key ||'',
  54. title: option.title,
  55. permissions: {
  56. edit: true,//是否可以编辑: 只能查看,传false
  57. print: true,
  58. download: true,
  59. "fillForms": true,//是否可以填写表格,如果将mode参数设置为edit,则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
  60. "review": true //跟踪变化
  61. },
  62. url: option.url,
  63. },
  64. documentType: this.doctype,
  65. editorConfig: {
  66. callbackUrl: option.editUrl,//"编辑word后保存时回调的地址,这个api需要自己写了,将编辑后的文件通过这个api保存到自己想要的位置
  67. lang: option.lang,//语言设置
  68. //定制
  69. customization: {
  70. autosave: true,//是否自动保存
  71. chat: false,
  72. forcesave:true,//开启手动保存
  73. comments: false,
  74. help: true,
  75. hideRightMenu:true,
  76. // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
  77. //是否显示插件
  78. plugins: false,
  79. },
  80. user:{
  81. id:option.user.id,
  82. name:option.user.name
  83. },
  84. mode:option.model?option.model:'edit',
  85. },
  86. width: '100%',
  87. height: '100%',
  88. token:option.token||''
  89. }
  90. // eslint-disable-next-line no-undef,no-unused-vars
  91. this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config)
  92. },
  93. getFileType(fileType) {
  94. let docType = ''
  95. let fileTypesDoc = [
  96. 'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps',
  97. ]
  98. let fileTypesCsv = [
  99. 'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx',
  100. ]
  101. let fileTypesPPt = [
  102. 'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx',
  103. ]
  104. if (fileTypesDoc.includes(fileType)) {
  105. docType = 'text'
  106. }
  107. if (fileTypesCsv.includes(fileType)) {
  108. docType = 'spreadsheet'
  109. }
  110. if (fileTypesPPt.includes(fileType)) {
  111. docType = 'presentation'
  112. }
  113. return docType
  114. }
  115. },
  116. }
  117. </script>