Vue

2023-08-01 02:03| 来源: 网络整理| 查看: 265

2021-06-09 更新完整功能可移步到点我 2020-12-28更新新建了一个群如有问题不能及时回复可加群咨询 805371278 ps：如要私信，请直接说问题。 https://view.officeapps.live.com/op/view.aspx?src= 用这个链接拼接后端给你返回的数据直接在浏览器中打开可以快捷测试后端返回的数据是否符合要求

最近写了个有预览word 、Exce、ppt以及pdf文件的后台管理在网上也找了很多就感觉很复杂，当然最后还是实现了，本博主一项喜欢简单越简单越好越好理解

废话不多说先上效果图（我就喜欢那种有图的代码能预览一下是不是自己想要的效果）

1.显示页面在这里插入图片描述 2，预览效果 word 2.exce 3.ppt 没有但是都一样

4.pdf 在这里插入图片描述 1. 首先说预览 word 、Exce、ppt 代码

handleEdit 是上图中预览按钮参数 row 是每一行数据 if (!/.(pdf|PDF)$/.test(row.wjYsmc)) 是判断文件格式是否为pdf 不是就执行以下代码 window.open( “https://view.officeapps.live.com/op/view.aspx?src=” + this.yuming + “/zhengCe?id=” + row.id, “_blank”);

https://view.officeapps.live.com/op/view.aspx?src= 是官网提供的方法官方网址：https://www.microsoft.com/en-us/microsoft-365/blog/2013/04/10/office-web-viewer-view-office-documents-in-a-browser/

src 后面是你文档的地址或者是你下载的地址注意：

要有域名要在公网能连接到最好不要有什么访问权限当然带参数是可以

我是在新窗口打开的（很简单一行代码）

.vue

this.yuming + “/zhengCe?id=” + row.id, 拼接的地址

methods: { handleEdit(index, row) { if (!/\.(pdf|PDF)$/.test(row.wjYsmc)) { // 不是pdf格式 window.open( "https://view.officeapps.live.com/op/view.aspx?src=" + this.yuming + "/zhengCe?id=" + row.id, "_blank" ); return false; } else { // pdf 格式 let url = this.yuming + "/anli?id=" + row.id this.viewVisible = true this.pdfsrc = url } }, } 2. pdf

代码我是把预览放在一个弹框里面的首先引入一个pdf包 npm 安装在这里插入图片描述选择在有 node_modules 文件的的文件夹在控制台 cd 到你的 projectV 这个文件夹运行下面的代码（我的是 projectV，每个人命名不一样）

npm install --save vue-pdf .vue

url 就是 pdf 文件的地址和上面 office文件地址一样赋值给 pdfsrc

// 引入刚才下载的 pdf import pdf from 'vue-pdf' export default { components: { pdf }, data() { yuming: "https://xxx.xxxxxxx.xxxx/m", // 域名管理方便一点 /m 域名下的文件夹 viewVisible: false, // 弹框隐藏 fileType: 'pdf', // 文件类型 pdfsrc: '', // 文件地址 }, created() { // 有时PDF文件地址会出现跨域的情况,最好先处理一下 this.pdfsrc = pdf.createLoadingTask(this.pdfsrc) }, methods: { handleEdit(index, row) { //console.log(row.wjYsmc) if (!/\.(pdf|PDF)$/.test(row.wjYsmc)) { window.open( "https://view.officeapps.live.com/op/view.aspx?src=" + this.yuming + "/anli?id=" + row.id, "_blank" ); return false; } else { let url = this.yuming + "/anli?id=" + row.id this.viewVisible = true this.pdfsrc = url } }, closeDialog(done) { done(); }, } }

还有模板链接后台管理模板

【本文地址】

Vue

Vue

今日新闻

推荐新闻