vue3写pdf文档预览和下载

1. 实现效果：

文件列表点击pdf文档可预览，含多页，带下载按钮

 2.  用的vue3 + vue-pdf-embed

版本号可用1.x或2.x : 这里我用的1.2.1版本：

// 安装：
npm i [email protected]

• 2.0.0版本 ： https://www.npmjs.com/package/vue-pdf-embed/v/2.0.0

• 1.2.1版本 : https://www.npmjs.com/package/vue-pdf-embed/v/1.2.1?activeTab=readme

3. 具体代码

• hmtl部分

<div  @click="handleViewPdf">
    <div class="pdfNameBox" title="点击预览">
        点击文件名
    </div>
</div>

<!-- pdf预览 -->
<el-dialog v-model="pdfOpen" title="'pdf预览'" width="80%" append-to-body>
    <div v-loading="isLoading" style="min-height: 439px" element-loading-text="加载中...">
        <vue-pdf-embed ref="pdfRef" v-if="!pdfFail" :source="pdfSrc"  @rendered="handleDocumentRender" @loading-failed="handlePdfFaid" />
    </div>

    <a :href="pdfSource" :download="下载文件名" class="loadPdf" target="_blank">
        <el-button type="primary" icon="Download" plain>下载</el-button>
    </a>

    <template #footer>
        <el-button @click="pdfOpen = false" type="primary">关 闭</el-button>
    </template>
</el-dialog>

• 方法：

const pdfOpen = ref(false);
const isLoading = ref(true);
const pdfSrc = ref('');
const pdfFail = ref(false);

// 调试文档用
const pdfSource = ref('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf');
// pdf加载
function handleDocumentRender(val) {
    isLoading.value = false;
    pdfFail.value = false;
}
// pdf加载失败，或者404
function handlePdfFaid(val) {
    isLoading.value = false;
    pdfFail.value = true;
    console.log('文档加载失败');
}
// 点击 预览
function handleViewPdf(file) {
    isLoading.value = true;
    pdfOpen.value = true;
    pdfSrc.value = pdfSource.value;
    pdfFail.value = false;
}

• 样式：

// 下载按钮
.loadPdf {
    position: absolute;
    top: 6px;
    right: 50px;
}