import vueFilePreview from 'gxd-file-preview';
//初始化自定义插件,(pdf.js,worker.js文件建议放在本地服务器),cdn有可能不稳定
Vue.use(vueFilePreview,{
pdf: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.min.js', //pdf插件
worker:'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.0.288/build/pdf.worker.min.js',//pdf.work插件
});
<template>
<div id="app"></div>
</template>
<script>
export default {
name: 'app',
components: {},
data(){
return {}
},
created() {
setTimeout(()=>{
this.$preview({
//url: 'https://testimg.tiangongy.com/100601/a024b86760bb1ff3b38f25ae2e0b9bdf', //图片
//url: 'https://testimg.tiangongy.com/100601/9958ff80d202f91b347b14b5c56f14e8', // xlsx
//url: 'https://testimg.tiangongy.com/100601/12d7e6a9b0b9169b800fbb29061212c2', //pptx
//url: 'https://testimg.tiangongy.com/100601/ce44c69f3075334e6c624b8180a42804', //doc,
//url: 'https://testimg.tiangongy.com/100601/3b85b4f1c3accdb4bb9f7e42e1f9070e',
url:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
fid: '12121212'
})
}, 2000);
},
methods:{
}
}
</script>
<style>
</style>
<template>
<div id="app">
<h1>列表展示</h1>
<xd-file-list-preview
:show-close="showClose"
:list="list" @remove="handleRemoveClick"
:is-pagination="isPagination"
></xd-file-list-preview>
<hr>
<h1>文件预览模式</h1>
<a @click="handleClick" style="color: #4285f4">9958ff80d202f91b347b14b5c56f14e811</a>
</div>
</template>
<script>
interface FileItemFormat {
url:string; //文件路径(绝对路径)
name?: string; //文件名称
fid?: string; //文件ID
download?: string; //预览页面是否显示下载按钮
}
export default {
name: 'app',
components: {},
data() {
return {
showClose: true, //是否开启删除功能
isPagination: true, //列表启动翻页功能
/**@type FileItemFormat **/
list: [
{url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'},
{url: 'https://jfb-public-images.oss-cn-qingdao.aliyuncs.com/admin-upload/202111081034429231.png?x-oss-process=style/common'},
{url: 'http://static.e56buy.com/XdgfsqR2INp7uFxTuLQtnMstYLY4K8rr.蛋糕缺少内容.docx', name: 'aaaa'},
{
url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
name: 'aaaa',
fid: 'aadadads',
download: false ,//是否展示下载按钮
},
]
}
},
created() {
},
methods: {
/**
* @description 删除图片事件
* @param item {Object} 当前被删除的文件对象
* @param done {function} 删除文件完成回调函数
*/
handleRemoveClick(item, done) {
setTimeout(() => {
console.log('handleRemoveClick', item);
done()
}, 2000);
},
/**
* @description 点击查看预览功能
*/
handleClick() {
this.$preview({
url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
fid: 'aadadads',
download: false ,//是否展示下载按钮
})
},
}
}
</script>
<style>
</style>