vue3+Ts 开发H5项目在线浏览pdf/word/pptx/xlsx文件方法分享;
pdf需要pdfh5这个插件才可以在线浏览,所以我们先下载插件;
pdfh5官方地址
注意 “pdfh5”: “^1.4.7” 有问题会出现插件不能完全加载出现504错误 请切换版本下载 “pdfh5”: "^1.4.2"版本
文章来源：https://www.toymoban.com/news/detail-599897.html
npm i pdfh5@1.4.2
其实很简单 就只用处理一下pdf类型的文件就可以了 其他文件 office 有一个自带的线上网站可以拼接上线上url直接预览文章来源地址https://www.toymoban.com/news/detail-599897.html
<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);
}
}
到了这里，关于vue3+Ts 开发H5项目在线浏览pdf/word/pptx/xlsx文件方法分享的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
