标签：Vue res fileList fileName vue let pdf bis

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。