通過點擊button按鈕，觸發(fā) @click="openPDF(performance_report)"方法，把對應(yīng)需要展示的pdf傳送到openPDF()方法內(nèi)，這里的pdf文件格式必須包括id、name、url。

在這里，performance_report為預(yù)覽的文件：文章來源地址http://www.zghlxwxcb.cn/news/detail-627263.html

    <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: {
            //打開的文件一般是在后端存儲的，從后端取到文件后，把文件傳輸?shù)給penPDF方法，用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形式進行預(yù)覽
                    let blob = new Blob([res.data], {
                        type: "application/pdf;chartset=UTF-8",
                    });
                    let fileURL = URL.createObjectURL(blob);
                    // this.fileURLOther = fileURL;
                    window.open(fileURL);
                });
            }
        }
    }
</script>

到了這里，關(guān)于前端js打開pdf文件--文件通過瀏覽器打開，以pdf形式進行預(yù)覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！