<template>
<div v-loading="loading" style="height: 100%">
<iframe
:src="url"
width="100%"
height="100%"
frameborder="0"
/>
</div>
</template>
<script>
export default {
data: vm => ({
loading: false,
documentId: vm.$route.query.documentId,
url: ''
}),
created () {
this.previewDocument();
// 防止出现两个滚动条（body和iframe)
const body = document.getElementsByTagName('body')[0];
body.style.overflow = 'hidden';
// iframe 占满整个页面
const app = document.getElementById('app');
app.style.height = '100%';
},
methods: {
previewDocument () {
this.loading = true;
this.$http({
url: '/rssapi/RentCollection/DownloadDocument',
params: { documentIds: this.documentId },
responseType: 'arraybuffer'
})
.then(res => {
const blob = new Blob([res], {
type: 'application/pdf'
});
this.url = window.URL.createObjectURL(blob);
})
.catch(e => {
this.$message.error(`${e.code}: ${e.message}`);
})
.finally(() => {
this.loading = false;
});
}
}
};
</script>
二进制流实现pdf预览
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 文件上传只能使用post一、创建文件上传控件 二、创建表单对象 三、使用append方法向表单追加二进制文件 四、...
- 业务有个需求，要做图片预览上传，过去都是客户端上传给后端，后端返回url前端进行预览，现在其实可以不依赖后端做预览...
- TODO1:将字符串转换成Bitmap类型（Base64字符串转换成图片） TODO2:二进制流转换为Bitmap...
