前端vue利用flexpaper实现在线预览

前端vue利用flexpaper实现在线预览

下载flexpaper

只需要用到js文件和FlexPaperViewer.swf:
flexpaper_flash_debug.js
flexpaper_flash.js
jquery.js

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- FlexPaperViewer flash version debug template -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <title>FlexPaper</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
      html,
      body {
        height: 100%;
      }

      body {
        margin: 0;
        padding: 0;
        overflow: auto;
      }

      #flashContent {
        display: none;
      }
    </style>

    <script type="text/javascript" src="./flash/flexpaper_flash2.js"></script>
    <script type="text/javascript" src="./flash/jquery.js"></script>
  </head>

  <body>
    
      <a id="viewerPlaceHolder" style="height:100%;display:block"></a>
    </div>
    <script type="text/javascript">
      function getUrlKey(name) {
        return (
          decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
        )
      }
      var host = 'http://36.112.155.134:8089/swf/'
    var fp = new FlexPaperViewer(
      host + '/FlexPaperViewer', // 这个放文件地址   如果是url 远程地址  需要把FlexPaperViewer插件 放到服务器  这里也是服务器地址  如果需要跨域的话 让后台配置一下 crossdomain.xml
      'viewerPlaceHolder', {
        config: {
          // SwfFile: '/flash/组织管理(517更改).swf', //应该打开flash文档FlowPaper 地址
          SwfFile: host + getUrlKey('path'), //应该打开flash文档FlowPaper 地址
            Scale: 1,//缩放比例
            ZoomTransition: 'easeOut',//Flexpaper中缩放样式,它使用和Tweener一样的样式,默认参数值为easeOut.其他可选值包括: easenone, easeo 
            ZoomTime: 0.5,//从一个缩放比例变为另外一个缩放比例需要花费的时间,该参数值应该为0或更大。
            ZoomInterval: 0.2,//从一个缩放比例变为另外一个缩放比例需要花费的时间,该参数值应该为0或更大。
            FitPageOnLoad: false,//从一个缩放比例变为另外一个缩放比例需要花费的时间,该参数值应该为0或更大。
            FitWidthOnload: false,//从一个缩放比例变为另外一个缩放比例需要花费的时间,该参数值应该为0或更大。
            FullScreenAsMaxWindow: false,//是否支持全屏
            ProgressiveLoading: false,//当设置为true的时候,展示文档时不会加载完整个文档,而是逐步加载
            
            MinZoomSize: 0.2,//最小的缩放比例。
            MaxZoomSize: 5,//设置最大的缩放比例。
            SearchMatchAll: false,//设置为true的时候,单击搜索所有符合条件的地方高亮显示。
            InitViewMode: 'Portrait',//可滚动    Portrait//不可滚动//启动模式
            RenderingOrder: 'flash',
            ViewModeToolsVisible: true,//工具栏上是否显示样式选择框(就是显示缩略图或分页显示的工具)
            ZoomToolsVisible: true,//工具栏上是否显示缩放工具
            NavToolsVisible: true,//工具栏上是否显示导航工具(也就是页码工具)
            CursorToolsVisible: true,//工具栏上是否显示光标工具 
            SearchToolsVisible: true,//工具栏上是否显示搜索
            localeChain: 'zh_CN'//语言
          }
        }
      )
    </script>
  </body>
</html>

点击查看即可跳转到新页面预览文件

前端vue利用flexpaper实现在线预览_第1张图片

//查看
  getLook() {
    getLookFile({ idList: Array.from(this.idlist) })
      .then(res => {
        console.log(res.data)
        let url = res.data
        window.open('/Onlinepreview.html?path=' + encodeURIComponent(url))
      })
      .catch(e => {
        this.$notify.error(`获取详情失败: ${e.message}`)
      })
      .finally(() => {
        this.SET_LOADING(false)
      })
  }

最终实现效果

前端vue利用flexpaper实现在线预览_第2张图片

你可能感兴趣的:(vue)