Vue集成vue-pdf进行pdf预览

1、安装vue-pdf 

npm install --save vue-pdf

2、前端示例代码如下

<template>
    <div class="pdf" v-show="fileType === 'pdf'">
        <sticky class-name="sub-navbar">
            <Button @click="handelCancel" icon="md-undo">返回</Button>
        </sticky>
        <div v-if="fileList!=null && fileList.length > 0">
            <label class="prev" @click="prevPage" v-if="currentIndex != 1">
                上一篇
            </label>
            <pdf
                    v-if="change"
                    v-for="i in numPages"
                    :key="i"
                    :src="src"
                    :page="i"
                    style="display: inline-block; width: 100%">
            </pdf>
            <label class="next" @click="nextPage" v-if="currentIndex < fileList.length">
                下一篇
            </label>
        </div>
        <div v-else>
            <h1>无PDF文件</h1>
        </div>
    </div>
</template>
<script>
    // npm install --save vue-pdf
    import pdf from 'vue-pdf'
    import {getPdfListByRelationId, getPdfListByProjectId} from '@/api/target-attachment'

    export default {
        components: {pdf},
        data() {
            return {
                change: true,
                fileType: 'pdf', // 文件类型
                src: '', // pdf文件地址
                numPages: 1,
                flowSonStepId: this.$route.query.flowSonStepId,
                projectId: this.$route.query.projectId,
                fileList: [],
                currentIndex: 1
            }
        },
        mounted() {
            let _this = this
            window.addEventListener('popstate', function () {
                _this.$watermark.set('')
            },false)
            this.$watermark.set('嘉定区产业项目全流程服务信息系统')
            this.getPdfList()
        },
        methods: {
            // 初始化获取pdf文件
            getPdfList() {
                let _this = this
                if (this.flowSonStepId){
                    getPdfListByRelationId(this.flowSonStepId).then(res => {
                        if (res.code === 200) {
                            _this.fileList = res.data
                            _this.getPdfCode()
                        }
                    })
                }else if(this.projectId){
                    getPdfListByProjectId(this.projectId).then(res => {
                        if (res.code === 200) {
                            _this.fileList = res.data
                            _this.getPdfCode()
                        }
                    })
                }
            },
            // 初始化获取pdf文件
            getPdfCode() {
                let _this = this
                if (_this.fileList != null && _this.fileList.length > 0) {
                    let fileLoadUrl = window.configs.testUrl
                    switch (process.env.NODE_ENV) {
                        case 'test':
                            fileLoadUrl = window.configs.testUrl
                            break
                        case 'production':
                            fileLoadUrl = window.configs.proUrl
                            break
                    }
                    _this.loadPDF(fileLoadUrl + "/file/loadPdfFile/" + _this.fileList[0].id)
                }
            },
            prevPage() {
                this.currentIndex--
            },
            nextPage() {
                this.currentIndex++
            },
            loadPDF(pdfUrl) {
                this.change = false
                let self = this
                let loadingTask = pdf.createLoadingTask(pdfUrl)
                console.log(loadingTask)
                loadingTask.promise.then(pdf => {
                    self.src = loadingTask
                    self.numPages = pdf.numPages
                }).catch((err) => {
                    console.error('pdf加载失败')
                })
                this.change = true
            },
            handelCancel() {
                this.$watermark.set('')
                this.$router.go(-1)
            }
        }
    }
</script>
<style>
    .prev {
        position: absolute;
        top: 50%;
        z-index: 100;
    }

    .next {
        position: absolute;
        top: 50%;
        z-index: 100;
        right: 10px
    }

    #app{
        overflow-y: auto;
    }
</style>

3、后端示例代码

@RestController
@RequestMapping("pdf")
public class PdfController {
    @GetMapping("downloadFile/{fileName}")
    public void downloadFile(@PathVariable("fileName") String fileName, HttpServletResponse response) {
        response.setHeader("content-type", "application/octet-stream");
        response.setContentType("application/octet-stream");
        try {
            response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(fileName, "UTF-8"));
        } catch (UnsupportedEncodingException e2) {
            e2.printStackTrace();
        }
        byte[] buff = new byte[1024];
        BufferedInputStream bis = null;
        OutputStream os = null;
        try {
            String path = "D:\\Ch";
            os = response.getOutputStream();
            bis = new BufferedInputStream(new FileInputStream(new File(path + "\\" + fileName + ".pdf")));
            int i = bis.read(buff);
            while (i != -1) {
                os.write(buff, 0, buff.length);
                os.flush();
                i = bis.read(buff);
            }
        } catch (FileNotFoundException e1) {
        } catch (IOException e) {
            e.printStackTrace();
        } finally {
            if (bis != null) {
                try {
                    bis.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

标签：Vue,res,fileList,fileName,vue,let,pdf,bis
来源： https://www.cnblogs.com/niuniu0108/p/15524436.html