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

通过点击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>