jquery中pdf在页面的显示和导出

想要实现弹窗中显示pdf内容,并导出pdf.
在这里插入图片描述

01 显示pdf

第一,二个是通过pdf.js实现pdf在页面的显示,只不多第一个只显示一页,第二个可显示全部;第三个是通过jquery.media.js实现pdf在页面的显示
重点讲第二个!!

01 .pdf结尾在线接口显示到页面 (pdf.js库怎么安装及使用):只显示一页

参考:https://www.yisu.com/ask/45769732.html

这个只显示第一页,想要显示全部页面,需要循环加载

02 如何用PDF.JS显示整个PDF (而不仅仅是一页)?

PDFJS有一个成员变量numPages,所以你只需要遍历它们。

但是重要的是要记住,在pdf.js中获取页面是异步的,因此顺序将得不到保证。所以你需要用链子锁住它们。你可以这样做:

var currPage = 1; //Pages are 1-based not 0-based
var numPages = 0;
var thePDF = null;

//This is where you start
PDFJS.getDocument(url).then(function(pdf) {

        //Set PDFJS global object (so we can easily access in our page functions
        thePDF = pdf;

        //How many pages it has
        numPages = pdf.numPages;

        //Start with first page
        pdf.getPage( 1 ).then( handlePages );
});



function handlePages(page)
{
    //This gives us the page's dimensions at full scale
    var viewport = page.getViewport( 1 );

    //We'll create a canvas for each page to draw it on
    var canvas = document.createElement( "canvas" );
    canvas.style.display = "block";
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //Draw it on the canvas
    page.render({canvasContext: context, viewport: viewport});

    //Add it to the web page
    document.body.appendChild( canvas );

    //Move to next page
    currPage++;
    if ( thePDF !== null && currPage <= numPages )
    {
        thePDF.getPage( currPage ).then( handlePages );
    }
}

参考:https://cloud.tencent.com/developer/ask/sof/251356

03 jQuery实现在线预览PDF文件(通过a标签链接跳转):

参考:
https://blog.csdn.net/angellee1988/article/details/121644256

02 导出pdf

参考:
jquery页面:
https://blog.csdn.net/hnn567/article/details/132356614

微信小程序:
https://blog.csdn.net/hnn567/article/details/132304552

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现使用Datatable和pdfmake导出PDF,需要以下几个步骤: 1. 首先,确保在HTML页面引入Datatable和pdfmake的相关库文件。使用CDN引入时,可以在<head>标签添加以下代码: ```html <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.68/vfs_fonts.js"></script> ``` 2. 在Datatable的初始化代码,设置导出按钮和相关选项,如下所示: ```javascript $(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'copyHtml5', 'excelHtml5', 'csvHtml5', { extend: 'pdfHtml5', text: '导出PDF', customize: function(doc) { // 在这里可以对PDF进行自定义设置,如修改字体、添加文支持等 doc.defaultStyle.font = 'SimSun'; // 设置字体为宋体 } } ] } ); } ); ``` 3. 注意,在上述代码的customize函数,可以对PDF进行自定义设置。如果需要添加文支持,可以设置字体为文宋体(SimSun)或其他文字体。 通过以上步骤,就可以实现使用Datatable和pdfmake导出PDF了。在导出PDF时,表格文内容将正确显示,并且可以根据需要添加其他自定义设置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值