【iframe结合pdf.js实现pdf的预览/下载及打印功能】

iframe结合pdf.js实现pdf的预览/下载及打印

1.[下载pdf.js](http://mozilla.github.io/pdf.js/getting_started/#download)
2. 将下载好的文件中的build和web拷贝到vue项目的public文件夹下
3. 直接在项目中使用
4. 温馨提示:
最终效果

1.下载pdf.js

2. 将下载好的文件中的build和web拷贝到vue项目的public文件夹下

3. 直接在项目中使用

 <template><div v-dee-loading="loading" class="page-content record-card-preview"><!-- 打印预览 --><el-drawertitle="文件预览":visible.sync="drawer"size="70%"><div v-dee-loading="loadingPdfUrl" class="scan-file-com"><iframev-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.selectionRowsswitch (val.key.btnValue) {case 'previewPdf':this.previewPdfFun(sels)breakdefault:break}},// 预览pdfpreviewPdfFun(sels) {if (sels.length === 1) {this.drawer = truethis.loadingPdfUrl = truerecordPrint(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进行适当的修改就可以啦

最终效果

【iframe结合pdf.js实现pdf的预览/下载及打印功能】相关推荐

手机端html5展示pdf,pdf.js移动端展示预览打开pdf-pdfh5.js
pdf.js移动端展示预览打开pdf-pdfh5.js 本插件基于pdf.js和jQuery,可手势捏合缩放,支持懒加载(即分段加载). 2019.07.18更新:增加npm install pdfh ...
使用pdf.js在移动端预览pdf文档
pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...
pdf.js使用（在线预览pdf文件）
最近公司需要pdf在线预览,于是找到pdf.js这个插件 , 好处就在于 pc端和移动端不需要花过多的精力去调. 1:需要到官网下载源码:https://mozilla.github.io/pdf. ...
excel怎么设置打印区域_如何设置打印预览，Excel打印功能介绍
NO.1 打印是制作Excel表格的一种最终输出操作,我们所有的制作都将体现在打印纸上面. 那么如何实现这个功能呢? 通常通过打印按钮来进行操作,下面介绍一下Range对象下面的两个打印相关的方法. ...
文件被损坏 java_使用PDF.JS实现pdf文件在线预览时，报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 ?file=" width="1024" height=" ...
Vue3 + PDF.js 实现 PDF 预览
文章目录 1 前言 2 PDF 预览测试 2.1 下载 PDF.js 2.2 window.open 直接打开 2.3 弹框形式打开 3 修改配置项 3.1 修改主题色为暗色系 3.2 修改默认语言为 ...
vue里使用pdf.js实现pdf文件的预览功能
引言:经过上一篇文章的测试,发现了以下问题: 兼容性不好不适用多语言场景(不能共用一套) 会出现跨域问题难于监控阅读状态不能控制下载状态在基于vue开发的移动项目中,如果预览的pdf数量不是很 ...
加载js文件，在线预览pdf文档
加载js文件,在线预览pdf文档效果演示环境要求 JS文件下载 Jsp页面导入js文件 jquery.media.js源码效果演示首先,先展示效果图环境要求 Tomcat8.5 [注意]:T ...
java零碎要点010---Java实现office文档与pdf文档的在线预览功能
最近项目有个需求要java实现office文档与pdf文档的在线预览功能,刚刚接到的时候就觉得有点难,以自己的水平难以在三四天做完.压力略大.后面查找百度资料.以及在同事与网友的帮助下,四天多把它做完 ...

【iframe结合pdf.js实现pdf的预览/下载及打印功能】

iframe结合pdf.js实现pdf的预览/下载及打印

1.下载pdf.js

2. 将下载好的文件中的build和web拷贝到vue项目的public文件夹下

3. 直接在项目中使用

4. 温馨提示:

最终效果

【iframe结合pdf.js实现pdf的预览/下载及打印功能】相关推荐

最新文章

热门文章