- 26
- 0
现在我要对后台传过来的pdf文件流进行下载和预览,这里我用的是vue-pdf插件,我封装了一个PDF组件,这里直接引入了,下载功能已经完成,就是预览功能一直实现不了
下面是我封装的PDF组件
<template>
<div style="height:0;overflow-y: auto;overflow-x: hidden;">
<pdf :src="src"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {pdf},
data() {
return {
src: ""
};
},
methods: {
//预览pdf
previewPDF(url,fileData) {
this.src = pdf.createLoadingTask(url);
},
//下载PDF
downloadPDF(url,fileData, fileName) {
this.$axios({
method: "post",
responseType: "arraybuffer",
url: url,
data:fileData
})
.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);
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);
}
}
}
};
</script>
然后下面是我现在的页面
<template>
<div>
<PDF ref="pdf"></PDF>
<el-button @click="previewFile(scope.row.fileId)">预览</el-button>
<el-button @click="downloadFile(scope.row)">下载</el-button>
</div>
</template>
<script>
import PDF from "../components/pdf.vue";
export default {
components: {PDF},
methods:{
previewFile(id){
this.$refs.pdf.previewPDF(后台的url接口,id) //id是预览要带给后台的,我怀疑就是这里出了问题,但是我不知道怎么解决。。。
},
downloadFile(obj){
this.$refs.pdf.downloadPDF(后台的url接口,{ fileId: obj.id},obj.fileName)
},
}
下载的可以解决。。预览的话id传不过去
求解
0
打赏
收藏
点击回答
您的回答被采纳后将获得:提问者悬赏的 10 元积分
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
