精华内容
下载资源
问答
  • Markdown文件地址 demo-code地址(文章所有代码合集)在这篇文章里,我将会向你展示如何使用Nodejs、Puppeteer、无头浏览器、Docker从一个样式要求复杂的的React页面导出PDF背景:个月前,一个RisingStack客服...

    414c49666b8e765299188291e5e6f6f9.png

    我只是知识的搬运工~

    原文外网地址
    Markdown文件地址
    demo-code地址(文章中所有代码合集)在这篇文章里,我将会向你展示如何使用Nodejs、Puppeteer、无头浏览器、Docker从一个样式要求复杂的的React页面导出PDF

    背景:几个月前,一个RisingStack的客服要求我们实现一个用户可以以PDF格式请求React页面的功能。这个页面主要是含有数据可视化、很多SVG的报告/结å果。此外,还有一些改变布局和修改一些HTML元素样式的特殊需求。因此,这个PDF相对于原始React页面,需要有一些不同的样式和添加。

    正如这个任务比可以用简单的css规则来解决的情况,要更复杂一些。在我们最开始寻找可行的方法中,我们主要找到了三种解决方法,这篇文章将会带你尽览这些可以使用的方法和最终的解决方案。

    目录:

    • 前端还是后端?
    • 方案1:使用一个DOM的屏幕快照
    • 方案2:只使用一个PDF的库
    • 最终方案3: Puppeteer,headless chrome和Nodejs
      • 样式操作
      • 往客户端发送
    • 在Docker下使用Puppeteer
    • 方案3 + 1:CSS打印规则
    • 总结

    客户端还是服务端

    在客户端和服务端都可以生产一个PDF文件。然而,如果你不想把用户的浏览器可以提供的资源用完,那还是更可能使用后端来处理。尽管如此,我还是会把两端的解决方法都展示给你看。

    方案1:使用DOM的屏幕快照

    乍看之下,这个解决方案可能是最简单的,并且它也被证明确实是这样,但是这个方案也有自己的局限性。如果你没有一些特殊的需求,这是一个很好的简单方法去生产一个PDF文件。

    这个方法的思路简单清晰:从当前页面创建一个屏幕快照,并把它放入一个PDF文件。相当的直接了当。我们使用两个库来实现这个功能:

    • html2canvas,从DOM中实现一个屏幕快照
    • jsPDF,一个生成PDF的库

    代码如下

    npm install html2canvas jspdf
    import html2canvas from 'html2canvas'
    import jsPdf from 'jspdf'
    
    printPDF () {
        const domElement = document.getElementById('your-id')
        html2canvas(domElement).then((canvas) => {
            const img = canvas.toDataURL('image/png')
            const pdf = new jsPdf()
            pdf.addImage(img, 'JPEG', 0, 0, width, height)
            pdf.save('your-filename.pdf')
        })
      }
    

    请确保你看到了html2canvasonclone方法。可以帮助你再获取照片前,便利的获取屏幕快照和操作DOM。我们可以看到需要使用这个工具的例子。不幸的是,这其中并没有我们想要的。我们需要再后端处理PDF的生成。

    方案2:仅仅使用一个PDF库

    在NPM上有许多库可以实现这样的要求,例如jsPDF或者PDFKit,随之而来的问题就是如果你想要使用这些库,你不得不再一次生成页面的架子。你还需要把后续的所有改变应用到PDF模板和React页面中。 看到上面得代码,我们需要自己创建一个PDF文档。现在你可以通过DOM找到如何去转换每一个元素变成PDF,但这是一个沉闷的工作。肯定有一些更简单的方法

    const doc = new PDFDocument()
      doc.pipe(fs.createWriteStream(resolve('./test.pdf')));
     doc.font(resolve('./font.ttf'))
         .fontSize(30)
         .text('测试添加自定义字体!', 100, 100)
     doc.image(resolve('./image.jpg'), {
       fit: [250, 300],
       align: 'center',
       valign: 'center'
     })
     doc.addPage()
         .fontSize(25)
         .text('Here is some vector graphics...', 100, 100)
     doc.pipe(res); 
     doc.end();
    

    这个片段是根据PDFKit的文档写的,如果不需要在已有的HTML页面进行转变,它可以有效的帮助你快速的直接生产PDF文件。

    最终方案3:Puppeteer,Headless Chrome和Nodejs

    什么是Puppeteer呢,它的文档是这么说的

    Puppeteer是一个通过开发者工具协议对Chrome和Chromium提供高级API的操纵。Puppeteer默认运行headless版本,但是可以配置成运行Chrome或者Chromium。 这是一个可以在Nodejs环境运行的浏览器。如果你阅读它的文档,第一件事说的就是Puppeteer可以用来生产屏幕快照和页面的PDF。这也是我们为什么要使用它。
    const puppeteer = require('puppeteer')
    (async () => {
        const brower = await puppeteer.launch()
        const page = await brower.newPage()
        await page.goto('https://github.com/linpenghui958', { waitUntil: 'networkidle0'})
        const pdf = await page.pdf({ format: 'A4'})
        await brower.close()
        return pdf
      })()
    

    这是一个导航到制定URL并生产该站点的PDF文件的简单函数。首先,我们启动一个浏览器(只有headless模式才支持生成PDF),然后我们打开一个新页面,设置视图并且导航到提供的URL。

    设置 waitUntil: 'networkidle0'选项表示Puppeteer已经导航到页面并结束(500ms内没有网络请求)这里可以查看更详细的文档 随后,我们将PDF保存到一个变量,关闭浏览器并返回这个PDF文件。

    Note: page.pdf方法可以接受一个 options对象,你可以设置path属性把文件保存在本地中。如果没有提供path,pdf文件将不会保存到本地,你将会得到一个buffer流。稍后我们会讨论如何处理这个情况。

    如果你需要从一个先登录才能访问的页面生成PDF,那么首先你需要导航到登录页面,检查表单元素的ID或者name,填上,并且提交表单。

    await page.type('#email', process.env.PDF_USER)
    await page.type('#password', process.env.PDF_PASSWORD)
    await page.click('#submit')
    

    通常商城登录认证使用环境变量,不要硬编码它们。

    样式操作

    Puppeteer同样提供了一个样式操作的解决方案。你可以在生成PDF文件之前加入style标签,并且Puppeteer将会生成一个样式修改后的文件。

    await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
    

    把资源发送给客户端并保存

    现在我们已经在后端生成了一个PDF文件。接下来做什么呢?根据上面提到的,如果你讲文件保存到本地,你将会得到一个buffer。你只需要通过适当的内容格式将buffer发送给前端即可。

    const result = await printPdf()
      res.set({'Content-Type': 'application/pdf', 'Content-Length': result.length})
      res.send(result)
    

    现在你可以简单的像服务端发送骑牛,并生成PDF

    getPDF() {
        return axios.get('//localhost:3001/puppeteer', {
          responseType: 'arraybuffer',
          headers: {
            'Accept': 'application/pdf'
          }
        })
      }
    

    当你发送一次请求,buffer将会开始下载。现在下一步就是将buffer转换成PDF文件。

    savePDF() {
        this.getPDF()
          .then(res => {
            const blob = new Blob([res.data], { type: 'application/pdf'})
            const link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = 'test.pdf'
            link.click()
          })
          .catch(e => console.log(e))
      }
    savePDF() {
        this.getPDF()
          .then(res => {
            const blob = new Blob([res.data], { type: 'application/pdf'})
            const link = document.createElement('a')
            link.href = window.URL.createObjectURL(blob)
            link.download = 'test.pdf'
            link.click()
          })
          .catch(e => console.log(e))
      }
    <button onClick={()=> {this.savePDF()}}>generate PDF in puppeteer</button>
    

    现在如果你的点击按钮,那么PDF将会被浏览器下载。

    在Docker使用Puppeteer

    我认为这是最棘手的部分,因此让我来帮你节省好几个小时Google的时间。 官方文档只指出,“在Docker下运行headless Chrome可能会非常棘手”。文档有一个排除故障的章节,在那你可以找到使用Docker安装Puppeteer的所有必要信息。 如果你要在Alpine(linux)镜像中安装Puppeteer,确保你看到了页面的这个部分。否则你可能会掩盖掉你无法使用最新版本的Puppeteer并且你同样需要禁用shm而去使用一个flag

    const browser = await puppeteer.launch({
      headless: true,
      args: ['--disable-dev-shm-usage']
    });
    

    否则,Puppeteer的子进程甚至可能会它开始前就把内存用完了。更多关于故障排查的信息都在上面的链接里。

    方案3 + 1:CSS打印规则

    有人可能会认识从开发者的角度使用CSS打印规则很容易。但是当他们面临浏览器的兼容性时如何跨过这个问题? 当你选择使用CSS打印规则,你不得不在每一个浏览器测试并确认所有的结果都是同样的布局并且这还不是全部要做的事。 比如说,在一个给定的元素插入break after,这应该不是一个特别难懂的情况。但是你当你使用Firefox开展工作的时候,你会感到非常惊讶。点击查看兼容性 除非你是一个身经百战在创建打印页面有许多经验的CSS魔术师,否则这将会花费很多的时间。 如果你可以保持打印样式比较简单那么使用打印规则还是很棒的。 比如下面这个例子。

    @media print {
        .print-button {
            display: none;
        }
    
        .content div {
            break-after: always;
        }
    }

    上述的CSS隐藏了打印按钮,并且在每一个class名为content后代的div都加入一个break。这里有一篇文章总结了你可以使用打印规则做什么,并且在浏览器兼容性方便会有哪些问题。 综合考虑,如果你不需要从一个如此负责的页面生成PDF,那么CSS打印规则还是很棒的。

    总结:使用Nodejs和Puppeteer从HTML生成PDF

    让我们快速的全览一遍所有的方案。 - 使用DOM的屏幕快照:当你需要从一个页面创建一个快照(例如创建一个短文)这是很有用,但是当你需要处理大量的数据时,可能会出问题。 - 仅使用一个PDF库:如果你需要从头开始以编程的方式创建一个PDF文件,这是一个完美的解决方法。否则,你需要保持HTML和PDF的模板肯定是不方便的。 - Puppeteer:尽管让他在Docker下使用它很麻烦,但是它提供了我们需要的最好的结构并且它的代码也是最容易编写的。 - CSS打印规则:如果你的用户知道如何打印一个文件并且你的页面也相对简单。这可能是最梧桐的解决方案。但是正如你所见,在文中的例子里它并不合适。Happy printing!

    展开全文
  • !... 控制台打印出来7777这个数据结构就是【“评估总结”,“zbm服务器”】这种格式,tab选项卡就是用这个数组渲染出来,当点击评估总结时候走后台ajax...不管tab选项卡里有个都要下载到pdf里,请问这个要怎么写
  • 最开始用是TCPDF,但是一直乱码,在百度...弃用TCPDF之后,改用了MPDF,成功实现了导出PDF中文不乱码 3.代码 composer require mpdf/mpdf function exportPdf(){ if (function_exists('curl_init')) { //$url = url('c

    1.需求:HTML页面导出为PDF文件

    最开始用的是TCPDF,但是一直乱码,在百度上找了很多解决方案,试过之后,也修改了几次编码,依然乱码或者没有成功导出,放弃了TCPDF.

    2.解决方案.

    弃用TCPDF之后,改用了MPDF,成功实现了导出PDF中文不乱码

    3.代码

    1.安装mpdf工具类
    composer require mpdf/mpdf
    2.代码

    function exportPdf(){
            if (function_exists('curl_init')) {//这里用的curl方式获取html,如果html代码量不是很大且固定,也可以直接写在后端
                $url = 'html链接地址';
                $ch = curl_init();
                curl_setopt($ch, CURLOPT_URL, $url);
                curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
                curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
                $html = curl_exec($ch);
            }
            $pdf = new Mpdf(['mode'=>'utf-8','format' => 'A4',]);
            $pdf->SetAuthor('作者');
            $pdf->SetTitle('标题');
            $pdf->SetSubject('项目');
            $pdf->SetKeywords('关键词,关键词');
    
            // 设置左、上、右的间距
            $pdf->SetMargins('10', '10', '10');
            // 设置是否自动分页  距离底部多少距离时分页
            $pdf->SetAutoPageBreak(TRUE, '15');
    
            //开启字段文字和样式
            $pdf->autoScriptToLang = true;
            $pdf->autoLangToFont = true;
            $pdf->AddPage();
            // 设置字体
            $pdf->SetFont('stsongstdlight', '', 14, '', true);
    
            //设置背景
            $pdf->SetWatermarkImage('背景图路径', 0.1, [230, 180]);
            $pdf->showWatermarkImage = true;
    
            $pdf->WriteHTML($html);
            $pdf->Output('文件名称.pdf','D');
            exit();
        }
    
    展开全文
  • 本次完善综合特点:一对一,点对点给对应地方写值,比如模板里面放了个name标识,在程序里把“张三”赋给name,那么输出的pdf...支持多页模板,即使是好几页的模板,只要每个变量对应范围确定好了,生成出来...

    本次完善综合特点:

    一对一,点对点的给对应的地方写值,比如模板里面放了个name标识,在程序里把“张三”赋给name,那么输出的pdf里面name的地方就变成了张三,准确方便快捷

    支持中文,可以使用自己下载的字体。

    支持图片:图片的大小范围可以在模板随意调,生成出来的图片不会超过范围。而且不需要根据坐标去算,程序里面自动计算的。

    支持多页模板,即使是好几页的模板,只要每个变量对应的范围确定好了,生成出来的格式就不会错乱。

    详细步骤和完整代码在下面。

    先放个效果图:

    98214f9a14ed5a55555a47566404eddb.png

    下面是详细的步骤:

    1.首先,新建一个word文档,内容如下,另存为pdf格式,我的命名:mytest.pdf。

    76dcc76e9c0ca8968ad1348f60f6b7ae.png

    2.用Adobe Acrobat Pro 打开刚刚制作的pdf文件。如下图:

    50d760a5e57d18fa9f8ab7af9f9b52f6.png

    3.点击创建-->PDF表单-->使用当前文档-->使用当前文档,一直点下一步完成。(有的版本Adobe Acrobat Pro软件右边有准备表单,直接点击准备表单是同样的效果)

    5fb3b0a6cc0d737245650e1ab2fc6696.png

    c6bdd53645ceff9afdd4fcb4bb9d99e7.png  

    66a72f4c9fd35b809b36b934933510bb.png

    801af6855612cd5e092e3263d79c907d.png

    4.上面好多给框,双击黑框可以修改名称,还可以设置字体大小,如下图

    84de183171089dcd8aa1384fee9daeab.png

    4133e49adbcdf518d3f7b63b408cf566.png

    5.图片的地方没有黑框,我们可以在空白处点击右键,选择文本域,给图片的域起名为img。

    70cab423b69ab2c1fc964a296cf638c5.png

    01f2a66f978b3bad7998cace3955441f.png

    3a43ef1d22aa50a1f61b7ba4fb3dce36.png

    6.如下图是制作好的pdf模板,直接保存即可。注意:黑框里面的名称,是后面程序要用到的,程序根据名称给对应的位置赋值的。不管你去什么名字,只要保证和程序里面的名字一直即可。

    3dcac73915996342ebace549007cb6eb.png

    7.pom.xml文件:

    com.itextpdf

    itextpdf

    5.4.3

    8.工具类文件:

    我的模板是放在C盘下面的,所以路径是C:/mytest.pdf,另外,我还在C盘下面放了一张图片 c:/50336.jpg ,字体使用的是系统的字体,也可以自己到网上下载自己喜欢的字体文件,路径指向自己下载的字体文件路径即可

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    package wp.util;

    import java.io.ByteArrayOutputStream;

    import java.io.FileOutputStream;

    import java.io.IOException;

    import java.util.HashMap;

    import java.util.Map;

    import com.itextpdf.text.*;

    import com.itextpdf.text.pdf.*;

    /**

    * Created by wangpeng on 2018/02/01.

    */

    public class PdfUtils {

    // 利用模板生成pdf

    public static void pdfout(Map o) {

    // 模板路径

    String templatePath = "C:/mytest.pdf";

    // 生成的新文件路径

    String newPDFPath = "C:/testout1.pdf";

    PdfReader reader;

    FileOutputStream out;

    ByteArrayOutputStream bos;

    PdfStamper stamper;

    try {

    BaseFont bf = BaseFont.createFont("c://windows//fonts//simsun.ttc,1" , BaseFont.IDENTITY_H, BaseFont.EMBEDDED);

    Font FontChinese = new Font(bf, 5, Font.NORMAL);

    out = new FileOutputStream(newPDFPath);// 输出流

    reader = new PdfReader(templatePath);// 读取pdf模板

    bos = new ByteArrayOutputStream();

    stamper = new PdfStamper(reader, bos);

    AcroFields form = stamper.getAcroFields();

    //文字类的内容处理

    Map datemap = (Map)o.get("datemap");

    form.addSubstitutionFont(bf);

    for(String key : datemap.keySet()){

    String value = datemap.get(key);

    form.setField(key,value);

    }

    //图片类的内容处理

    Map imgmap = (Map)o.get("imgmap");

    for(String key : imgmap.keySet()) {

    String value = imgmap.get(key);

    String imgpath = value;

    int pageNo = form.getFieldPositions(key).get(0).page;

    Rectangle signRect = form.getFieldPositions(key).get(0).position;

    float x = signRect.getLeft();

    float y = signRect.getBottom();

    //根据路径读取图片

    Image image = Image.getInstance(imgpath);

    //获取图片页面

    PdfContentByte under = stamper.getOverContent(pageNo);

    //图片大小自适应

    image.scaleToFit(signRect.getWidth(), signRect.getHeight());

    //添加图片

    image.setAbsolutePosition(x, y);

    under.addImage(image);

    }

    stamper.setFormFlattening(true);// 如果为false,生成的PDF文件可以编辑,如果为true,生成的PDF文件不可以编辑

    stamper.close();

    Document doc = new Document();

    Font font = new Font(bf, 32);

    PdfCopy copy = new PdfCopy(doc, out);

    doc.open();

    PdfImportedPage importPage = copy.getImportedPage(new PdfReader(bos.toByteArray()), 1);

    copy.addPage(importPage);

    doc.close();

    } catch (IOException e) {

    System.out.println(e);

    } catch (DocumentException e) {

    System.out.println(e);

    }

    }

    public static void main(String[] args) {

    Map map = new HashMap();

    map.put("name","张三");

    map.put("creatdate","2018年1月1日");

    map.put("weather","晴朗");

    map.put("sports","打羽毛球");

    Map map2 = new HashMap();

    map2.put("img","c:/50336.jpg");

    Map o=new HashMap();

    o.put("datemap",map);

    o.put("imgmap",map2);

    pdfout(o);

    }

    }

    48304ba5e6f9fe08f3fa1abda7d326ab.png

    9.效果图如下:

    98214f9a14ed5a55555a47566404eddb.png

    展开全文
  • 这本来是一个非常简单问题,然而某度一搜出来居然都是用什么打印文件方法,于是专门写一篇博文...注意:如果选择了多个页面,勾选了提取页面为单独文件会将每一提取为单独文件,如要提取到一个PDF里面,则不勾

    这本来是一个非常简单的问题,然而某度一搜出来居然都是用什么打印文件的方法,于是专门写一篇博文说说怎么提取。

    1. 展开页面缩略图:

    2. 选中并右键单击要提取的页面,点击提取页面(X)...

    3. 选择要提取的范围,并根据自己的需要选择是否要在提取后删除页面或是提取页面为单独文件:

    若勾选了提取页面为单独文件,则在确定后会弹出浏览文件夹的对话框,选择路径后直接导出到所在路径下。

    注意:如果选择了多个页面,勾选了提取页面为单独文件会将每一页提取为单独文件,如要提取到一个PDF里面,则不勾选,待其生成并自动打开后手动保存为文件。

    展开全文
  • 利用PHP编码生成PDF文件是一个非常耗时的工作。在早期,开发者使用PHP并借助FPDF来生成PDF文件。但是如今,已经有很多函数库可以使用了,并且能够从你提供的HTML文件生成PDF文档。...FPDF中的F代表免费和自由:你可...
  • 本次完善综合特点:一对一,点对点给对应地方写值,比如模板里面放了个name标识,在程序里把“张三”赋给name,那么输出的pdf...支持多页模板,即使是好几页的模板,只要每个变量对应范围确定好了,生成出来...
  • 这对于诸如“带有填充的图像”,“渐变填充”,“某些阴影”有时无法很好地呈现到PDF中的东西很有帮助。 您还可以指定PNG的导出大小-与典型的Sketch导出相同; 200w =宽度200px, 100h =高度100px, 3x = 3倍画板...
  • html页面导出pdf,本来是一件很简单事情,在浏览器直接打印(Mac快捷键为⌘+p;...调研了种html导出pdf的实现方式,这里把要点记录下来分享下。 调研对象 优点 缺点 分页 图片 表格 链接 中文 特殊...
  • 摘要:在EPLAN软件常规我们导出PDF的做法是通过 >导出PDF来实现。如果一个项目有百套图纸,而又没有整合到一个项目,按常规做法,我们要重复很多次。我们可以通过结合EPLAN自动编辑功能,只需一步,...
  • PDF 可通过按钮来添加动作跳转到指定页面,包括跳转到文档首页、文档末、跳转到上一、下一页、或跳转到指定页面等。下面将通过java代码来演示如何添加具有以上种功能按钮。使用工具:Free Spire.PDF for...
  • 前言:这段时间在项目开发中,遇到这样一个需求:前端在一个...根据调研,决定采用html2canvas 和 jspdf 方式实现,即使用html2canvas 将页面转成图片后,放到pdf中导出。 一、安装插件与引入 html2canvas:npm...
  • 有时候也需要导出pdf或者CSV报 表。其实原理都差不多。刚开始本来不打算也这篇博客介绍这个。感觉这篇博客和前面博客有点雷同。原理基本都一样。但想了想。有时候可能有些童鞋遇到这 样需求会无从下手。所以...
  • [Firefox]最简单网页导出pdf方法

    万次阅读 2016-10-01 23:01:44
    注:尝试了个firefox网页保存pdf插件,要么需要联网(由服务器完成格式转换)、要么转换后的pdf文字字体发生变化或将页面直接存成了图片,对后续拷贝文件带来很大不变。该方法无需安装任何插件、无需联网,而且...
  • 前端使用jsPdf导出pdf文档

    千次阅读 2018-08-17 10:44:51
    最近遇到一个需求,就是要把个页面数据汇总一下生成pdf报表(当然数据是后端封装好),于是乎第一时间想到了 jspdf,但是也踩了不少坑,尤其是它竟然不支持中文. 先上点代码… 1.安装jspdf javascript 代码 ...
  • 利用VHDL设计许多实用逻辑系统 有许多是可以利用有限状态机设计方案来 描述和实现 无论与基于VHDL其它设计方案相比 还是与可完成相似功能CPU 相比 状态机都有其难以逾越优越性 它主要表现在以下方面...
  • 在写代码,肯定会有生成pdf的需求,试了很多方法都事倍功半,通常我们做法不外乎以下种:1、先生成html,再通过相关类库把html转化为pdf,转化出来的pdf其实跟html表现还有很大差距,并且无法分页,比如...
  • 有时候也需要导出pdf或者CSV报表。其实原理都差不多。刚开始本来不打算也这篇博客介绍这个。感觉这篇博客和前面博客有点雷同。原理基本都一样。但想了想。有时候可能有些童鞋遇到这样需求会无从下手。所以还是...
  • vue项目使用html2canvas转成pdf导出

    千次阅读 2019-01-12 15:34:23
    想把这个轮播图一都转成pdf的格式。。。在网上找了好长时间,,才明白一点点, 思路:轮播图。因为我是使用轮播图写。一个轮播页面上是一个组件,所以只要把每个组件都打印出来就好。但是这样有问题。...
  • Finereport导出空白

    2020-03-04 19:58:13
    FineReport导出pdf或打印出现空白?简单步,让你轻松解决。 工具/原料 联网电脑 方法/步骤 1/7 分步阅读 使用帆软报表软件,导出pdf可能存在多余空白,如图所示 2/7 2. 打开cpt文件,然后找到空白...
  • 想把这个轮播图一都转成pdf的格式。。。在网上找了好长时间,,才明白一点点,思路:轮播图。因为我是使用轮播图写。一个轮播页面上是一个组件,所以只要把每个组件都打印出来就好。但是这样有问题。后面...
  • Golang PDF导出(多语言)

    千次阅读 2019-04-02 15:52:38
    gopdf 介绍 gopdf 是一个比较完善的PDF导出库, 它整合了第三方库, 更加方便用户开发和使用. 它有以下特点: ...PDF 默认的配置选项简单, 且已经内置了常用的几种方式 PDF 文档采用类似 html 页面的属性设置, ...
  • 【js】使用js将html导出pdf格式

    千次阅读 2018-04-17 15:38:15
    项目开发遇到了一个变态需求,需要把一整个页面导出pdf格式,而且要保留页面上所有表格、svg图片和样式。简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。咋不上天呢……查了一下,能够...
  • 之前一个项目碰到问题,使用场景是:用户会将一份PDF格式协议上传到页面,我们需要将这份协议转换成多张图片(一文档对应一张图片),转换完成之后,用户点击导出按钮,将转换完成图片通过压缩文件...
  • 有时候也需要导出pdf或者CSV报表。其实原理都差不多。刚开始本来不打算也这篇博客介绍这个。感觉这篇博客和前面博客有点雷同。原理基本都一样。但想了想。有时候可能有些童鞋遇到这样需求会无从下手。所以还是...
  • 有时候也需要导出pdf或者CSV报表。其实原理都差不多。刚开始本来不打算也这篇博客介绍这个。感觉这篇博客和前面博客有点雷同。原理基本都一样。但想了想。有时候可能有些童鞋遇到这样需求会无从下手。所以还是...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 134
精华内容 53
关键字:

导出pdf中的几页