1、在项目public的index.html引入js

<script id="scriptApi" type="text/javascript" src="http://39.101.173.94/web-apps/apps/api/documents/api.js"></script>

2、在vue页面中写html代码

<div @click=print2><div ref="demo" style="height: 80vh;margin-top: 10px"><div id="placeholder" /></div></div>

4、打印

print2() {this.$refs.demo.getElementsByTagName('iframe')[0].contentWindow.postMessage('print', '*') //contentWindow属性返回iframe 中的文档，postMessage方法的作用是实现跨源通信},

3、点击预览展示弹框

data(){return{src:'',code:'',dialogIframeVisible :false,}
}
watch:{
dialogIframeVisible(val) {if (val) {this.$nextTick(() => {this.initEditor(`在这里插入代码片`'这是文档标题',`${this.src}`, false, false, false, false,   //src为url`${this.code}`, 'view', '', {})  //code为id  如果是移动端，在view后面加 'mobile'})} else {this.$editor.destroyEditor()  //关闭弹框时销毁节点，否则上一个文件url不能清空}}
},
methods:{initEditor(username, docUrl, titlebarFlag, rightPanelFlag, leftPanelFlag, toobarFlag,         docKey, mode, type, permission) {const _this = thisvar getDocumentType = function(ext) {if ('.doc.docx.docm.dot.dotx.dotm.odt.fodt.ott.rtf.txt.html.htm.mht.pdf.djvu.fb2.epub.xps'.i ndexOf(ext) != -1) return 'text'if ('.xls.xlsx.xlsm.xlt.xltx.xltm.ods.fods.ots.csv'.indexOf(ext) != -1) return 'spreadsheet'if ('.pps.ppsx.ppsm.ppt.pptx.pptm.pot.potx.potm.odp.fodp.otp'.indexOf(ext) != -1) return 'presentation'return null}// mode for editorwindow.mode = window.mode || mode || 'view'mode = window.mode// mode for editorwindow.type = window.type || type || 'desktop'console.log(window.type)type = window.type// url for document// window.docUrl = document.getElementById("documentUrl").value;window.docUrl = docUrl// key for chaching and collaborate editingwindow.docKey = docKey// type for documentvar docType = docUrl.substring(docUrl.lastIndexOf('.') + 1).trim().toLowerCase()// type for editorvar documentType = getDocumentType(docType)window.permission = permissionwindow.user = usernamewindow.user = window.user || '测试'var id = window.user + '-4'// CXO_API.CXEditor// creating object editingvar onDocumentReady = function() {// editor.destroyEditor()_this.isPrint = true}var onAppReady = function() {}console.log({title: docUrl,url: docUrl,fileType: docType,key: docKey + 2,permissions: window.permission})// eslint-disable-next-line no-undefvar editor = new CXO_API.CXEditor('placeholder', {type: type,width: (type == 'desktop' ? '100%' : undefined),height: (type == 'desktop' ? '100%' : undefined),documentType: documentType,token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.e30.h7HO85XtM9P2IY8biWyXVUMPrLlD77dXeNdRynV25R8',document: {title: docUrl,url: docUrl,fileType: docType,key: docKey + 2,permissions: window.permission},editorConfig: {mode: mode,user: {'id': id,'name': window.user},customization: {about: true,chat: false,comments: true,zoom: 100,leftMenu: leftPanelFlag,rightMenu: rightPanelFlag,toolbar: toobarFlag,displayTitle: titlebarFlag,header: false,statusBar: false,autosave: false,forcesave: false}},events: {'onDocumentReady': onDocumentReady,'onAppReady': onAppReady}})Vue.prototype.$editor = editor},// 预览&打印editOrPrint(record, code) {this.isPrint = falseconsole.log(record.contractSignedFileUrl, code)this.code = codethis.src = record.contractSignedFileUrlthis.dialogIframeVisible = true},
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！