您的位置：首页 > Web前端 > Vue.js

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

2020-06-03 04:38 92 查看

前端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>

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

//查看
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)
})
}

最终实现效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航