admin管理员组文章数量:1649158
yarn add vue-pdf
引入,注册 ,封装弹框组件方便后续使用,话不多说直接上代码
父组件html:
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="hangdleAttachment(scope.row)"
>
附件
</el-button>
<!-- 查看附件 -->
<pdf ref="pdf" :url="form.url" :title="viewTitle" />
父组件js:
import pdf from "@/components/pdf.vue";
export default {
components: {
pdf,
},
data() {
return {
url:"",
title:"",
from:{}
}
},
methods: {
/**查看附件 */
hangdleAttachment(row) {
this.form = row;
this.viewTitle = "**附件";
this.$nextTick(() => {
if (row.url?.includes(".pdf")) {
this.$refs.pdf.changeDialog(true);
} else {
this.$modal.msgError("无附件");
}
});
},
},
}
子组件html部分:
<el-dialog
:title="title"
:visible.sync="viewOpen"
width="60%"
v-dialogDrag
append-to-body
>
<div class="ViewContent">
<pdf
:src="this.url"
:page="currentPage"
:scale="1.0"
@num-pages="onNumPages"
></pdf>
</div>
<div slot="footer" class="dialog-footer">
<div class="footer_page">
<el-button
size="mini"
@click="goToPage(currentPage - 1)"
:disabled="currentPage === 1"
>
上一页
</el-button>
<span style="padding: 0 10px"
>{{ currentPage }} / {{ totalPages }}</span
>
<el-button
size="mini"
@click="goToPage(currentPage + 1)"
:disabled="currentPage === totalPages"
>
下一页
</el-button>
</div>
<div>
<el-button type="primary" @click="downloadAttachment">下 载</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</div>
</el-dialog>
子组件js部分:
import pdf from "vue-pdf";
export default {
name: "courseResourcePdf",
props: ["url", "title"],
components: {
pdf,
},
data() {
return {
// pdf分页
currentPage: 1,
totalPages: 0,
viewOpen: false,
extension: "", //打开弹框组件截取父组件传递的url的后缀,方便下载使用
};
},
methods: {
/** 总页数 */
onNumPages(numPages) {
this.totalPages = numPages;
},
/** 分页 */
goToPage(pageNumber) {
if (pageNumber >= 1 && pageNumber <= this.totalPages) {
this.currentPage = pageNumber;
}
},
/** 取消按钮 */
cancel() {
this.viewOpen = false;
},
/** 下载附件 */
downloadAttachment() {
fetch(this.url)
.then((res) => res.blob())
.then((blob) => {
const a = document.createElement("a");
document.body.appendChild(a);
a.style.display = "none";
// 使用获取到的blob对象创建的url
const url = window.URL.createObjectURL(blob);
a.href = url;
// 指定下载的文件名
a.download = `${this.title}.${this.extension}`;
a.click();
setTimeout(() => {
document.body.removeChild(a);
// 移除blob对象的url
window.URL.revokeObjectURL(url);
}, 300);
});
},
// 打开弹框
changeDialog(flag) {
this.viewOpen = flag;
this.extension = this.url.substring(this.url?.lastIndexOf(".") + 1);
},
},
};
子组件css部分:
<style lang="scss" scoped>
:deep(.el-dialog__body) {
padding: 10px;
}
:deep(.el-dialog__header) {
padding: 10px;
}
.ViewContent {
width: 100%;
height: 650px;
}
.pdfStyle {
height: 500px;
span {
font-size: 20px;
display: flex;
justify-content: flex-end;
align-items: center;
}
span:hover {
color: #017ffb;
cursor: pointer;
}
}
.footer_page {
text-align: center;
}
</style>
版权声明:本文标题:vue2中封装弹框组件pdf在线预览+下载(oss云链接) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729505369a1203563.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论