vue 预览下载pdf文件

343 阅读1分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情

很多系统都会配有用户手册,支持预览与下载(将静态放在项目的public文件夹中,不是后端返回) el-dialog + iframe 配合使用即可

image.png

代码部分:

	<el-dialog
            title="操作手册"
            :visible.sync="dialogVisible"
            fullscreen="true"
            style="z-index: 999; height: 100%; text-align: center"
    >
            <div style="position: absolute; top: 54px; right: 0; bottom: 6px; left: 0">
                <div style="height: 100%">
                    <iframe
                            :src="pdfUrl"
                            type="application/x-google-chrome-pdf"
                            width="100%"
                            frameborder="0"
                            scrolling="auto"
                            style="height: 90vh"
                    />
                </div>
                </div>
        </el-dialog>

data中定义变量:

data() {
    return {
        dialogVisible: false,
        pdfUrl: '/XXXXX.pdf'
    }
	},

css样式:(模态框全屏展示是title的文字背景样式)

    ::v-deep .el-dialog__header {
        background-color: rgb(181, 196, 241);
        font-weight: bold;
        .el-dialog__title {
                color: #fff;
        }
    }

注意各个标签高度的添加

效果图:

image.png