基于pdf.js实现打印预览

1.首先你需要下载pdf.js
在这里插入图片描述
2.下载后解压全部放置你的静态文件目录
在这里插入图片描述
3.项目中引用,基本是点击按钮

<a href='javascript:void(0);' onclick=\"xdjj.Export('" + row.formNo + "')\"><span class='glyphicon glyphicon-list-alt' aria-hidden='true'>打印</span></a>
//打印
xdjj={};
Export: function (formNos) {
        var exportUrl = (XXX/print.do?formNos=' + formNos);
        //另一页打开
        window.open("/Content/Third/pdf/web/viewer.html?file=" + encodeURIComponent(exportUrl));  
        //当前页打开方式
        //var index = layer.open({
        //    type: 2,
        //    area: ['90%', '90%'],//宽,高
        //    fix: true, //不固定
        //    maxmin: true,
        //    content: ["/Content/Third/pdf/web/viewer.html?file=" +         encodeURIComponent(exportUrl), 'no'],
        //});
        //layer.title("打印", index);
    }

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用pdfjs-dist库来实现打印功能,您可以按照以下步骤进行操作: 1. 首先,确保您已经引入了pdfjs-dist库。您可以在项目中使用npm或通过CDN来引入该库。 2. 接下来,您需要获取要打印PDF文档的URL或文件路径。 3. 创建一个用于渲染PDF的容器元素,例如一个div元素。 4. 使用pdfjs-dist的PDFJS对象来加载并渲染PDF文档。您可以使用PDFJS.getDocument方法来获取PDF文档实例。 下面是一个示例代码: ```javascript const url = 'https://example.com/sample.pdf'; // 替换为您要打印PDF文档的URL // 获取要渲染PDF的容器元素 const container = document.getElementById('pdf-container'); // 替换为您的容器元素ID // 使用pdfjs-dist加载和渲染PDF文档 PDFJS.getDocument(url).promise.then(pdf => { // 获取第一页 pdf.getPage(1).then(page => { const viewport = page.getViewport({ scale: 1 }); const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; container.appendChild(canvas); // 渲染PDF页面到canvas上 page.render({ canvasContext: context, viewport }).promise.then(() => { // 打印页面 window.print(); }); }); }); ``` 在上面的代码中,请替换`url`变量为您要打印PDF文档的URL,并将`container`变量替换为您用于渲染PDF的容器元素的ID或引用。 5. 最后,调用`window.print()`方法来触发打印功能。这将打开浏览器的打印对话框,允许用户选择打印设置并打印PDF文档。 请注意,以上代码仅仅是一个简单的示例,您可能需要根据您的具体需求进行适当的修改和调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值