【iframe结合pdf.js实现pdf的预览/下载及打印功能】
iframe结合pdf.js实现pdf的预览/下载及打印
·
iframe结合pdf.js实现pdf的预览/下载及打印
1.下载pdf.js
2. 将下载好的文件中的build和web拷贝到vue项目的public文件夹下
3. 直接在项目中使用
<template>
<div v-dee-loading="loading" class="page-content record-card-preview">
<!-- 打印预览 -->
<el-drawer
title="文件预览"
:visible.sync="drawer"
size="70%"
>
<div v-dee-loading="loadingPdfUrl" class="scan-file-com">
<iframe
v-if="drawer"
frameborder="0"
:src="pdfUrl"
style="height:100%;flex:1;width:-webkit-fill-available;"
/>
</div>
</el-drawer>
</div>
</template>
<script>
import { recordPrint} from '@/api/task.js'
export default {
name: 'RecordCardPreview',
components: { },
data() {
return {
loading: false
// 预览
loadingPdfUrl: false,
drawer: false,
pdfUrl: ''
}
},
created() {
},
mounted() {},
methods: {
// 此处为上下文调用 代码与本文无关,不重要,已经删掉啦 , 只需要知道在这里调用就可以了
tableToolHandler(val) {
const sels = this.selectionRows
switch (val.key.btnValue) {
case 'previewPdf':
this.previewPdfFun(sels)
break
default:
break
}
},
// 预览pdf
previewPdfFun(sels) {
if (sels.length === 1) {
this.drawer = true
this.loadingPdfUrl = true
recordPrint(sels[0].code).then(res => {
console.log(res)
if (res.data) {
this.loadingPdfUrl = false
/**
* 注意这里路径的使用 路径为html的基准路径拼接后台返回来的文档流
*/
this.pdfUrl = `pdf/web/viewer.html?file=${window.URL.createObjectURL(new Blob([res.data]))}`
}
}).catch(() => {
this.loadingPdfUrl = false
})
} else {
this.$utils.showMessageWarning('请选择一条数据进行操作!')
}
}
}
}
</script>
<style lang="scss">
</style>
4. 温馨提示:
如果你想做一些修改,比如要不要展示下载,打印按钮之类的, 对public/pdf/web/viewer.html进行适当的修改就可以啦
最终效果
更多推荐
已为社区贡献2条内容
所有评论(0)