zoukankan      html  css  js  c++  java
  • 前端实现PDF预览打印的几种方式

    一、<embed> 标签 展示PDF文件

    HTML <embed> 元素将外部内容嵌入文档中的指定位置,但是MDN上有提到,大多数现代浏览器已经弃用并取消了对浏览器插件的支持,所以建议尽量少用或者不用<embed>元素

    <embed
      type="application/pdf"
      src={pdfUrl}
      title={pdfName}
      style={{ height: '100vh' }}
    />

    这种方式适合纯PDF文件展示。

     

    二、<iframe> 标签 实现展示、打印功能

    1 html页面添加iframe

    <iframe
      style={{  '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文件不想在页面展示,只要把iframe的样式display设置为none,就能在更为友好的情况下实现PDF的打印功能。

     

    三、pdf.js库

    pdf.js库是一款功能强大的PDF文件操作库,这里就不细讲,可以关注官网 的相关例子,原理就是通过canvas实现展示效果,这是和上面几个例子不同的地方,好处就是,可以进一步对PDF文件进行修改,比较灵活。如果想要进一步实现打印效果,就需要比较好的CSS功底,通过样式的调整,来实现打印页面与当前预览界面区别。

    css中通过@media print,来修改print时候的预览样式

    @media print {
        @page {
          margin: 7mm 0 !important;
          padding: 0;
        }
    } 

     

     

    愿时光为我加冕
  • 相关阅读:
    笔记-1、线程基础、线程之间的共享和协作
    token的作用及实现原理
    mybatis+oracle如何批量执行多条update
    java程序员应该熟悉的20个有用的库(转)
    js-textarea文本换行符处理,Java后端以及js前端如何处理
    Spket,eclipse下安装Spket插件,格式化js
    关于equals变量 放在前后的问题
    @Autowired和@Qualifier共用出现提示信息Cannot find bean with qualifier XXXXX
    DOM树简单理解学习
    web.xml 中的listener、 filter、servlet 加载顺序及其详解
  • 原文地址:https://www.cnblogs.com/taishuhanmei/p/11788869.html
Copyright © 2011-2022 走看看