object标签预览PDF文件

前端页面实现预览在线PDF文件

1.利用原生标签object

<object width="100%" height="100" data="url" type="appcation/pdf">

2.在vue-cli项目中中利用object

<template>
    <div>
        <object width="100%" :height="clientHeight" :data="fileUrl" type="appcation/pdf"></object>
    </div>
</template>

<script>
export default {
    name: "pdfPage",
    directives: {},
    props: ["param"],
    data: function () {
        return {
            src: "http://10.9.1.182:4000/images/demo.pdf",
            // src: "http://10.9.1.182:4000/images/demo1.xlsx",
            // src: "http://localhost:8080/demo.xls",
            clientHeight: 0,
        };
    },
    computed: {
        fileUrl() {
            return this.src
        },
    },
    created() {
        this.clientHeight = Number(`${document.documentElement.clientHeight}`) - 140; //获取浏览器可视区域高度
    },
    methods: {},
    mounted: function () {},
};
</script>

<style scoped></style>