前端实现PDF预览打印

1 html页面添加iframe

<iframestyle={{ width: '100%',  height: '80vh'}}title="PDF文件"id="Iframe"src={pdfUrl}/>

2 如果只是纯展示，直接使用PDF路径，如果需要在外部对PDF文件进行打印，可以通过js获取PDF文件流，转成base64格式的路径来使用，避免iframe的跨域问题，视情况而定。

new Promise((resolve, reject): void => {axios({baseURL: XXX,method: 'GET',url,params,responseType: 'blob'}).then((res): void => {let blob = new Blob([res.data], { type: 'application/pdf' });resolve(URL.createObjectURL(blob));}).catch((err): void => {reject(err);});});

3 调取浏览器的打印功能，打印PDF文件。对于css样式不熟悉的人来说，这是最好的实现页面局部打印的方式。

 const printIframe = document.getElementById("Iframe");printIframe.contentWindow.print();

前端实现PDF预览打印相关推荐

前端实现 PDF 预览的常见方案
前端实现 PDF 预览的常见方案由于在搭建个人博客时,想实现在线预览 pdf 格式的个人简历,经过查阅大致有三大类实现方案:本文共涉及以下 5 种实现方案,如下所示: 使用 HTML 标签 ifra ...
vue中前端实现pdf预览（含vue-pdf插件用法）
场景:前端需要根据后端返回的线上pdf的地址,实现pdf的预览功能. 情况一:后端返回的pdf地址,粘贴到浏览器的url框中,是可以在浏览器中直接进行预览的. 方法(1)可以直接使用window.op ...
Android通过系统打印功能实现PDF预览打印
一. 简介 Android4.4(KitKat,api-19)系统内置了打印框架,通过安装对应打印机的打印插件,就可以容易实现打印功能: 关于图片.webview.layout及截屏相关的打 ...
java pdf预览打印_Android实现PDF预览打印功能
最近在做一个项目,需要用到android手机连接打印机进行打印的功能,目前在网上找到的教程介绍的都是蓝牙连接热敏打印机(pos机大小的打印机)和蓝牙打印机,如果连接日常所见到的网络打印机,进行打印,很 ...
Android实现PDF预览打印
最近在做一个项目,需要用到android手机连接打印机进行打印的功能,目前在网上找到的教程介绍的都是蓝牙连接热敏打印机(pos机大小的打印机)和蓝牙打印机,如果连接日常所见到的网络打印机,进行打印,很 ...
前端 PDFObject.embed预览PDF，另类方式隐藏工具条样例
<body> <div id="divid"></div> </body> <script > var filePath ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
在线浏览pdf doc html,前端实现在线预览pdf、word、xls、ppt等文件
1.前端实现pdf文件在线预览功能方式一: 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签hr ...
Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览说明 PDF.JS 代码实现预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...

前端实现PDF预览打印

前端实现PDF预览打印相关推荐

最新文章

热门文章