Vue中进行pdf的预览下载 vue-pdf_pdfjswrapper 下载

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

npm install --save vue-pdf

2、封装pdf组件

<template>
	<div style="height: 75vh;overflow-y: auto;overflow-x: hidden;">
		<pdf :src="src"></pdf>
	</div>
</template>
import pdf from 'vue-pdf'
export default {
    components: {pdf},
    data(){
        return{
            src: '',
        }
    },
    methods: {
        //预览pdf
        previewPDF(url){
            this.src = pdf.createLoadingTask(url)
        },
        //下载PDF
        downloadPDF(url,fileName){
            this.axios({
                method: 'get',
                responseType: 'arraybuffer',
                url: url
            }).then(function(res){
            		//调用下载方法，把后端传过来的流传给fileDownload方法
                    this.fileDownload(res.data, fileName);
                }.bind(this)
            )
            .catch(
                function(error) {
                    this.$Message.error("网络请求出错")
                    //调试阶段可以看看报的什么错
                    //console.log("error",error)
                }.bind(this)
            );
        },
        fileDownload:function (data, fileName) {
            let blob = new Blob([data], {
				//type类型后端返回来的数据中会有，根据自己实际进行修改
                type: "application/vnd.ms-excel"
            });
            let filename = fileName || "报表.xls";
            if (typeof window.navigator.msSaveBlob !== "undefined") {
                window.navigator.msSaveBlob(blob, filename);
            } else {
                var blobURL = window.URL.createObjectURL(blob);
                // 创建隐藏<a>标签进行下载
                var tempLink = document.createElement("a");
                tempLink.style.display = "none";
                tempLink.href = blobURL;
                tempLink.setAttribute("download", filename);
                if (typeof tempLink.download === "undefined") {
                    tempLink.setAttribute("target", "\_blank");
                }
                document.body.appendChild(tempLink);
                tempLink.click();
                document.body.removeChild(tempLink);
                window.URL.revokeObjectURL(blobURL);
            }
        }
    }
}

3、在组件中具体使用封装的pdf组件

<template>
	<div>
		<PDF ref="pdf"></PDF>
		<Button type="primary" size="small" @click="previewWeekly(item.id)">预览</Button>
    	<Button type="primary" size="small" @click="downloadWeekly(item.id,item.name)">下载</Button>
	</div>
</template>
<script>
import PDF from '../../../../../components/UM/MAM/pdfPerviewDownload'
import Vue from 'vue';
export default {
    components: {PDF},
    methods:{
    	//预览
        previewWeekly(id){
        	//调用子组件的预览方法
        	//完整的地址应该是发布到服务器的地址，不应该是localhost:8080这样的
        	//Vue.prototype.ApiUrl 用来读取服务器地址 比如:
        	//http://192.168.8.152:8080/MixShowView-Web/reports/preview/1
            this.$refs.pdf.previewPDF(Vue.prototype.ApiUrl+'/reports/preview/'+id)
        },
        //下载
        downloadWeekly(id,fileName){
        	//调用子组件的下载方法


![img](https://img-blog.csdnimg.cn/img_convert/65950ba30cb94ea01ad6d6deb487c958.png)
![img](https://img-blog.csdnimg.cn/img_convert/bcf2eb39a7a0c90fc3e9763dd8a3bcaa.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**

子书籍、讲解视频，并且后续会持续更新**

**需要这些体系化资料的朋友，可以加我V获取：vip1024c （备注嵌入式）**

**[如果你需要这些资料，可以戳这里获取](https://bbs.csdn.net/topics/618679757)**