最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

前端js打开pdf文件--文件通过浏览器打开,以pdf形式进行预览

运维笔记admin0浏览0评论

通过点击button按钮,触发 @click="openPDF(performance_report)"方法,把对应需要展示的pdf传送到openPDF()方法内,这里的pdf文件格式必须包括id、name、url。

在这里,performance_report为预览的文件:

    <div>
        <el-button type="text" size="mini" @click="openPDF(performance_report)">
            测试报告
        </el-button>
    </div>

<script>
    export default {
        components: {},
        data() {
            return {
                performance_report: [{
                    id: null,//文件的id
                    name: "",//文件的名称
                    url: "",//文件的url
                }, ],
            };
        },


        created() {},
        mounted() {},

        computed: {},

        methods: {
            //打开的文件一般是在后端存储的,从后端取到文件后,把文件传输到openPDF方法,用val接收即可。
            openPDF(val) {
                axios({
                    method: "get",
                    url: val[0].url,
                    params: {
                        fileId: val[0].id,
                    },
                    responseType: "blob",
                }).then((res) => {
                    console.log("res", res);
                    if (res.status == "500") {
                        this.$message({
                            message: "下载失败!",
                            type: "error",
                        });
                        return;
                    }
                    //文件以pdf形式进行预览
                    let blob = new Blob([res.data], {
                        type: "application/pdf;chartset=UTF-8",
                    });
                    let fileURL = URL.createObjectURL(blob);
                    // this.fileURLOther = fileURL;
                    window.open(fileURL);
                });
            }
        }
    }
</script>
发布评论

评论列表(0)

  1. 暂无评论