vue3+Ts 开发H5项目在线浏览pdf/word/pptx/xlsx文件方法分享;
pdf需要pdfh5这个插件才可以在线浏览,所以我们先下载插件;
注意 “pdfh5”: “^1.4.7” 有问题会出现插件不能完全加载出现504错误 请切换版本下载 “pdfh5”: "^1.4.2"版本
npm i pdfh5@1.4.2
其实很简单 就只用处理一下pdf类型的文件就可以了 其他文件 office 有一个自带的线上网站可以拼接上线上url直接预览
<div v-if="pdfFlag" class="main">显示</div>
<div v-else>
<div class="close-preview" @click="closePreview">关闭</div>
<div id="canvasPdf"></div>
</div>
const pdfObj = ref<any>(null)
// 关闭预览
const closePreview = () => {
pdfFlag.value = true;
pdfObj.value.destroy() //卸载
}
//预览
//文件链接地址 //文件类型后缀
const previewFile = async (url: string, format: string) => {
if (format == 'pdf') {
pdfFlag.value = false
await nextTick()
pdfObj.value = new Pdfh5("#canvasPdf", {
//dom元素展示位置
pdfurl: url, //pdf链接地址
})
} else {
//除pdf其他后缀预览方法
window.open('https://view.officeapps.live.com/op/view.aspx?src=' + url);
}
}