代码拉取完成，页面将自动刷新
同步操作将从 Raingad/jPreview 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件预览插件</title>
</head>
<body>
<div style="margin:0 auto;width:900px">
<h2>立即体验</h2>
<div id="el-app" style="display:flex;">
<div v-for="x in list" style="margin-right: 10px;">
<el-button round @click="preview(x.src)">${x.name}</el-button>
</div>
</div>
<div class="vditor-reset" id="preview">
<h1>jPreview</h1>
<h4>介绍</h4>
<p>一款纯JQ实现的预览插件，支持office文档，图片，音乐，视频，pdf等常用的文件！部分不支持的文档采用officeOnline在线预览。</p>
<p>支持doc、docx、ppt、pptx、wps、xls、xlsx、pdf、mp4、mp3、jpg、png等常用的文件。</p>
<p>体验地址：<a href="https://raingad.gitee.io/j-preview/">https://raingad.gitee.io/j-preview/</a></p>
<p>体验链接</p>
<pre><code class="language-html">https://raingad.gitee.io/j-preview/preview.html?src=你的文件地址
</code></pre>
<p>其他文件支持持续更新中...</p>
<h4>软件架构</h4>
<pre><code class="language-html">jpreview/
├─source # 预览资源库，使用时只需要使用static文件内的内容即可
├─static # 静态资源库
│ └─jPreview.js # 核心文件
├─index.html # demo
└─preview.html # 实现预览的页面
</code></pre>
<h4>使用说明</h4>
<ol>
<li>引入Jquery，和主文件</li>
</ol>
<pre><code class="language-html"><!-- css -->
<link rel="stylesheet" href="static/common/css/main.css">
<link rel="stylesheet" href="static/common/css/audio.css">
<link rel="stylesheet" href="static/luckysheet/css/pluginsCss.css">
<link rel="stylesheet" href="static/luckysheet/css/plugins.css">
<link rel="stylesheet" href="static/luckysheet/css/luckysheet.css">
<link rel="stylesheet" href="static/luckysheet/css/iconfont.css">
<link rel="stylesheet" href="static/pptxjs/css/pptxjs.css">
<link rel="stylesheet" href="static/pptxjs/css/nv.d3.min.css">
<!-- js -->
<script type="text/javascript" src="static/common/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="static/common/js/jPreview.js"></script>
</code></pre>
<ol start="2">
<li>初始化</li>
</ol>
<pre><code class="language-javascript">jPreview.preview({
container:"container", // 容器id
staticPath:"./static", // 静态资源路径
url:"", // 预览资源路径，没有的话获取url中scr参数
ext:"", // 资源后缀，如果url中没有的话，必须传入后缀名，否则无法识别文件类型
name:"", // 资源名称
watermarkTxt:"文件预览系统", // 水印文字
watermarkSize:"", // 水印文字大小
priority:1, // 优先级 1：使用插件预览 2：使用office在线预览，
oburl:"", // 可自动设置在线设置office线上预览地址，不需要的话可以不传
});
</code></pre>
<ol start="3">
<li>将静态资源放入到你需要的地方，并在初始化的时候，把相对路径填入 <code>staticPath</code>中。</li>
</ol>
<h4>开源库</h4>
<ol>
<li><code>docx-preview</code> docx文档</li>
<li><code>pptxjs</code> pptx演示文稿</li>
<li><code>luckysheet</code> excel表格</li>
<li><code>sheetjs</code> excel表格，支持xls</li>
<li><code>superVideo</code> 视频播放器</li>
<li><code>yAudio</code> 音频播放器</li>
<li><code>watermark</code> 水印</li>
<li><code>zoom-marker</code> 图片预览</li>
<li><code>pdfobject</code> pdf预览</li>
</ol>
<h4>已知bug</h4>
<p>pdf文档暂时不支持中文路径</p>
<pre><code>
</code></pre>
</div>
</div>
<script>
const previewElement = document.getElementById('preview')
Vditor.codeRender(previewElement);
Vditor.highlightRender({ "enable": true, "lineNumber": false, "style": "github" }, previewElement, 'https://unpkg.com/[email protected]');
Vditor.mathRender(previewElement, {
math: { "engine": "KaTeX", "inlineDigit": false, "macros": {} },
});
Vditor.mediaRender(previewElement);
Vditor.speechRender(previewElement);
</script>
</body>
<script type="text/javascript" src="static/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="https://www.layuicdn.com/layer-v3.5.1/layer.js"></script>
<script>
var app = new Vue({
delimiters: ['${', '}'],
el: '#el-app',
data(){
return {
loading: true,
list:[
{
name:'图片',
src:'https://lvzhe-project-file.oss-cn-beijing.aliyuncs.com/project856/5c389cbe8cb30.jpg',
},
{
name:'pdf',
src:'https://emoji.raingad.com/file/1.pdf',
},
{
name:'音频',
src:'https://emoji.raingad.com/file/风居住的街道.mp3',
},
{
name:'视频',
src:'https://blz-videos.nosdn.127.net/1/OverWatch/AnimatedShots/Overwatch_AnimatedShot_Winston_Recall.mp4',
},
{
name:'电子表格',
src:'https://emoji.raingad.com/file/7.xlsx',
},
{
name:'word文档',
src:'https://emoji.raingad.com/file/6.docx',
},
{
name:'演示文稿',
src:'https://emoji.raingad.com/file/5.pptx',
}
]
};
},
created(){
},
methods:{
preview(url){
layer.open({
type: 2,
title:'文件预览',
area: ['100%', '100%'],
content: 'preview.html?src='+url,
maxmin: true,
offset: 't',
shadeClose: true,
});
}
}
})
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手