解决华为云obs不支持在线预览pdf

背景

自2022年1月起，华为云基于安全考虑不支持在线访问桶中对象，当通过链接访问时，默认会以附件形式下载，这不符合我们在项目中查看文件的需求。

解决

分为两种场景

• 场景一：如果想通过浏览器在线访问，需要配置自己的域名，可直接参考 ”华为云“ 官网。
• 场景二：如果想通过前端以弹框组件的形式展示，如下图所示，可参考下方。

基于第三方插件解决（场景二）

1. 首先需要配置桶的跨域，可以通过控制台或代码配置。

   注：如果在没有配置前，通过代码查看已配置的桶域名规则，会报错。配置好可以通过代码正常访问。

2. 前端vue使用 pdfjs-dist()、vue-pdf 插件。参考：Vue3+Vite+Ts使用pdfjs-dist

"pdfjs-dist": "2.5.207",
"pdfvuer": "^2.0.1",

<template>
    <div id="pdfvuer">
        <pdf :src="pdfdata" v-for="i in numPages" :key="i" :id="i" :page="i" style="width:100%;">
            <template slot="loading">
                loading content here...
            </template>
        </pdf>
    </div>
</template>
  
<script>
import pdfvuer from 'pdfvuer'
import 'pdfjs-dist/build/pdf.worker.entry' // not needed since v1.9.1
​
export default {
    components: {
        pdf: pdfvuer
    },
    props: {
        url: {
            type: String
        }
    },
    data() {
        return {
            page: 1,
            numPages: 0,
            pdfdata: undefined,
            errors: [],
            scale: 'page-width'
        }
    },
    computed: {
        formattedZoom() {
            return Number.parseInt(this.scale * 100);
        },
    },
    watch: {
​
    },
    mounted() {
        this.getPdf()
    },
    methods: {
        getPdf() {
            let self = this;
            let url = this.url;
            self.pdfdata = pdfvuer.createLoadingTask(url);
            self.pdfdata.then(pdf => {
                self.numPages = pdf.numPages;
            });
        }
    }
}
</script>
<style src="pdfvuer/dist/pdfvuer.css">
​
</style>
<style lang="css" scoped>
    /* Page content */
    .content {
        padding: 16px;
    }
</style>