vue中预览并打印文件(多种格式)_梦幻春影的博客-程序员宅基地_vue打印预览

技术标签: vue.js  html  javascript  

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 = this
      var 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 editor
      window.mode = window.mode || mode || 'view'
      mode = window.mode
      // mode for editor
      window.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 editing
      window.docKey = docKey
      // type for document
      var docType = docUrl.substring(docUrl.lastIndexOf('.') + 1).trim().toLowerCase()
      // type for editor
      var documentType = getDocumentType(docType)
      window.permission = permission
      window.user = username
      window.user = window.user || '测试'
      var id = window.user + '-4'
      // CXO_API.CXEditor
      // creating object editing
      var 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-undef
      var 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 = false
      console.log(record.contractSignedFileUrl, code)
      this.code = code
      this.src = record.contractSignedFileUrl
      this.dialogIframeVisible = true
    },
}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_50186567/article/details/120490297

智能推荐

python练习册-第0004题_RJzz的博客-程序员宅基地

Description 任一个英文的纯文本文件,统计其中的单词出现的个数。Analysis 查阅了资料后发现python有个collections的模块可以对单词进行统计,主要是用到了Counter这个类Solution# -*- coding: utf-8 -*-from collections import Counterimport redef cal(): ...

jsp mysql汽车销售管理系统代码_基于servlet+jsp的汽车销售管理系统_倪修智的博客-程序员宅基地

【实例简介】能够实现客户预定车辆,客户的管理 ,车辆管理,司机管理【实例截图】【核心代码】car└── car├── car.sql├── src│ └── com│ ├── access│ │ ├── adminDao.java│ │ ├── CarDao.java│ │ ├── gwcDao.java│ │ ├──...

二进制转换与此平台,VMware Workstation不,Workstation 不可恢复,此虚拟环境中的长模式_spml的博客-程序员宅基地_此虚拟环境中的长模式将被禁用

在虚拟机安装OS后,启动虚拟机报:二进制转换与此平台上的长模式不兼容。此虚拟环境中的长模式将被禁用。因此需要使用长模式的应用程序将无法正常运行。经过各种查资料终于可以启动了,特此把个人成功案例给大家分享。(注:如果报VMware Workstation 不可恢复错误: (vcpu-0),则只看最后一个提示即可)

java栈帧在哪分配内存_JVM笔记(3)-内存结构&方法执行(栈帧)_珏璇的博客-程序员宅基地

1.JVM内存结构&amp;运行时数据区运行时数据区定义:Java 虚拟机在执行 Java 程序的过程中会把它所管理的内存划分为若干个不同的数据区域。JVM中主要分为:堆、方法区、程序计数器、虚拟机栈、本地方法栈。线程私有区域(线程独享):程序计数器、虚拟机栈、本地方法栈;线程共享区域(线程共享):堆、方法区;除此之外,还有个直接内存(堆外内存),虽然不是运行时数据区的一部分,但是也会频繁使用,可...

java poi 列宽,设置Apache POI中的列宽_TURBO30的博客-程序员宅基地

I am writing a tool in Java using Apache POI API to convert an XML to MS Excel. In my XML input, I receive the column width in points. But the Apache POI API has a slightly queer logic for setting col...

随便推点

HTTPS协议详解:TLS/SSL握手过程_麦峰强1的博客-程序员宅基地_status_request

1、握手与密钥协商过程基于RSA握手和密钥交换的客户端验证服务器为示例详解TLS/SSL握手过程再看一张手绘时序图(1).client_hello在发送的 Client Hello 中会带上自己支持的加密算法,供服务端从中挑选。由于老旧客户端会支持一些不安全的加密算法,为了提高传输安全,通常会在服务端指定一个可用算法列表,最终使用的加密类型取决于二者的交集,并按服务端优先级取第一个;如果没...

Angular-Web前端框架_️花的博客-程序员宅基地_angular web应用

Angular(使用Type Script编写)是Angular JS的重写(使用JS编写):构建用户界面的前端框架。Angular核心特性。

算法书籍—推荐收藏_Claude16888的博客-程序员宅基地_算法百科全书

1. CLRS 算法导论算法百科全书,只做了前面十几章的习题,便感觉受益无穷。2. Algorithms 算法概论短小精悍,别据一格,准经典之作。一个坏消息: 同算法导论,该书没有习题答案。好消息:习题很经典,难度也适中,只需花点点时间自己也都能做出来。不好也不坏的消息:我正在写习题的答案,已完成前三章,还剩九章约二百道题,顺利的话二个月之后发布。另有中文版名《算法概论》,我没看过

数据结构中的红黑树、B树、B+树_冰糖葫芦五加皮耶的博客-程序员宅基地

参考链接红黑树是一种自平衡的二叉查找树,是一种高效的查找树。特点:1.每个节点或者是黑色,或者是红色。2.根节点是黑色。3.每个叶子节点(NIL)是黑色。 [注意:这里叶子节点,是指为空(NIL或NULL)的叶子节点!]4.如果一个节点是红色的,则它的子节点必须是黑色的。5.从一个节点到该节点的子孙节点的所有路径上包含相同数目的黑节点。红黑树的应用比较广泛,主要是用它来存储有序的数据,它的时间复杂度是O(lgn),效率非常之高。如图:B树B树,Balance Tree,即为平衡树

Remmina 启动 VBoxManage_westanke163的博客-程序员宅基地

连接前:/usr/lib/virtualbox/VBoxManage startvm “windows10-64” --type headless连接后 :/usr/lib/virtualbox/VBoxManage controlvm “windows10-64” savestateorg.remmina.Remmina.desktop[Desktop Entry]Version=1.0...

java csv下载_java 实现csv文件下载_脱渊的博客-程序员宅基地

直接上代码@[email protected](value="download")@ResponseBodypublic void download(HttpServletRequest request,HttpServletResponse response){//获取系统换行符String lineSeparator = System.getProperty("line.sep...

推荐文章

热门文章

相关标签