JS打印、导出PDF

这篇具有很好参考价值的文章主要介绍了JS打印、导出PDF。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、调用浏览器打印插件

这种方式打印的pdf比较高清,且分页不会截断文字和图片,背景图片是会被截断的

1.直接打印

直接调用浏览器的打印功能,打印整个页面

function preview () {
     window.print();
}

2.打印指定区域

通过开始标记、结束标记来打印,打印局部页面

    <!--startprint-->
    <div>
        打印的内容
    </div>
    <!--endprint-->
    function preview () {
            let bdhtml=window.document.body.innerHTML; 
            let sprnstr="<!--startprint-->"; //开始打印标识字符串有17个字符
            let eprnstr="<!--endprint-->"; //结束打印标识字符串
            let prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17); //从开始打印标识之后的内容
            prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //截取开始标识和结束标识之间的内容
            window.document.body.innerHTML=prnhtml; //把需要打印的指定内容赋给body.innerHTML
            window.print(); //调用浏览器的打印功能打印指定区域
            window.document.body.innerHTML=bdhtml;//重新给页面内容赋值;
            return false;
        }

注意:1.如果你要打印的区域中包含vue赋值对象,那你的开始结束标志符需要放在实例化VUE绑定的ID外,如下,vue实例化绑定的是ID“#content”,那么标识符就要放在“#content”元素外

js导出pdf,其他,文件,pdf,chrome,前端,Powered by 金山文档
js导出pdf,其他,文件,pdf,chrome,前端,Powered by 金山文档

2.打印的这个函数,调用方式不能用vue的@click来调用,请用js的onclick来调用,函数允许放在vue的methods中,调用:οnclick="vm.preciew()",这是为什么呢?因为函数中的最后,我们重新给指定的区域赋值,如果是@click,重新赋值就不能给按钮再次绑定上点击事件,原生的点击事件重新赋值是能够重新绑定上去的

当然,你如果只是用到js或者jquery,那么,你将不用考虑上面这两个问题。

3.去掉打印时的页眉和页尾

  <style media="print">
        @page {
            size: auto;  /* auto是初始值 */
            margin: 0mm; /* 这会影响打印机设置中的边距 */
        }
    </style>

特别注意:在使用浏览器打印时,打印时从上往下,在分页时会裁剪和分割文字盒子,如图:

js导出pdf,其他,文件,pdf,chrome,前端,Powered by 金山文档

可使用css属性:

page-break-inside: avoid;

设置在表格元素内部避免进行分页的分页行为,打印时,这个盒子会被浏览器认为是一个整体,如果第一页放不下,这个盒子会排在第二页。

二、通过jspdf、html2canvas库来直接导出pdf

这种方式导出的pdf比较模糊,代码里面的图片必须是base64的格式才能显示,而且分页是会截断文字和图片;

但是不需要弹出浏览器打印框文章来源地址https://www.toymoban.com/news/detail-605475.html

<button onclick="pdfMap()">点击下载</button>

<script src="https://unpkg.com/jspdf@1.5.3/dist/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
function pdfMap() {
      html2canvas(document.body, {
        onrendered: function (canvas) {
          var contentWidth = canvas.width;
          var contentHeight = canvas.height;
          var pageHeight = contentWidth / 595.28 * 841.89;  //一页pdf显示html页面生成的canvas高度;
          var leftHeight = contentHeight;  //未生成pdf的html页面高度
          var position = 0;  //pdf页面偏移
          //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
          var imgWidth = 555.28;
          var imgHeight = 555.28 / contentWidth * contentHeight;
          var pageData = canvas.toDataURL('image/jpeg', 1.0);
          var pdf = new jsPDF('', 'pt', 'a4');
          //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围,无需分页
          if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
              leftHeight -= pageHeight;
              position -= 841.89;
              //避免添加空白页
              if (leftHeight > 0) {
                pdf.addPage();
              }
            }
          }
          pdf.save('content.pdf');
        }
      })
    }

到了这里,关于JS打印、导出PDF的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件

    【Vue】vue2预览显示quill富文本内容,vue-quill-editor回显页面,v-html回显富文本内容 【Vue】vue2项目使用swiper轮播图2023年8月21日实战保姆级教程 【Vue】vue2使用pdfjs预览pdf文件,在线预览方式一,pdfjs文件包打开新窗口预览pdf文件 提示:这里可以添加本文要记录的大概内容: vue

    2024年02月07日
    浏览(47)
  • react-前端excel 文件/PDF文件 导入 --导出,照片上传

    需要了解,new FormData() --上传时,将内容转为文件流                   FormData提供一种表示表单数据的键值对的构造方式,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率                  new FileReader()--base64压缩,目前不了解 一、excel文件导出      三

    2023年04月08日
    浏览(43)
  • 纯前端实现导出pdf文件(服务端不参与)

    大致查阅了现阶段使用较多的几种方案,,大概有以下几种方式: 一、原生window.print()方法导出pdf 二、jspdf 三、jspdf + html2canvas 四、pdfmake 方案 优点 缺点 window.print() 1、兼容性最好 2、可以将任意内容导出成 pdf 文档, 甚至是非改页面上的内容 1、调用方法时部分条件下导出pd

    2024年04月08日
    浏览(37)
  • Html转PDF,前端JS实现Html页面导出PDF(html2canvas+jspdf)

    一、背景介绍 ​ 当我们在不想改变后端代码的同时想是纯html页面导出PDF,那么(html2canvas+jspdf)就是无疑最好的选择,导出时它不占用我们服务器的资源,而是由用户本地自行执行js文件下载PDF,不占用我们系统的带宽,所以这无非是最好的选择方式。 二、疑问 1、为什么要

    2024年01月23日
    浏览(55)
  • 在OpenHarmony设备上呈现PDF文件内容pdfjs 【坚果派】

    JavaScript实现解析和展示PDF,可以在OpenHarmony设备上呈现PDF文件内容。 使用npm install 安装 配置全局resourceManager pdfjs 获取资源文件需要在EntryAbility文件配置全局resourceManager 1.使用getDocument(src:Uint8Array)方式加载要打开的PDF文件数据。 2.通过加载任务对象获取PDF文档中的各个页面。

    2024年02月05日
    浏览(51)
  • 后端接口返回文件流,前端实现docx/pdf/excel等类型文件的导出功能

    最近遇到一个需求,在后端返回文件流后前端需要实现导出docx类型的文件。在网上查看了一些资料总结了两种比较常用的方法。 1、封装接口 注意:接口需要添加 responseType: “blob”,否则会出现文件下载后无法打开或者损坏的情况。 2、转换数据格式 导出word文件,需要在创

    2024年01月21日
    浏览(45)
  • 前端JS实现导出xlsx文件

    需求背景: 需要导出表格的数据,由于后端不提供导出接口,所以由前端通过JSON数据导出实现。 使用的插件: js-export-excel 安装: npm install js-export-excel 使用: 亲测有用,只要前端能拿到的是表格全量数据,就能直接导出表格所有数据。但如果是后端分页查询的表格,前端

    2024年02月04日
    浏览(57)
  • 前端导出文件 | fileSaver.js源码阅读

    了解fileSaver.js核心实现 自己动手实现简易导出功能 在Vue中如何使用文件 1、fileSave.js库地址:https://github.com/eligrey/FileSaver.js 2、src目录结构 3、在浏览器打开test.html,点击下载按钮,进行代码调试 进入saveAs函数后可按下一步进行调试,查看代码执行过程。 fileSaver.js核心代码实

    2024年02月05日
    浏览(47)
  • vue2 pdfjs-2.8.335-dist pdf文件在线预览功能

    1、首先先将 pdfjs-2.8.335-dist 文件夹从网上搜索下载,复制到public文件夹下. 2、在components下新建组件PdfViewer.vue文件 3、在el-upload 中调用 pdf-viewer 组件 4、在el-upload 中的 on-preview方法中加上对应的src路径  internalPreview(file) { //判断需要预览的地方加 props—pdfView                

    2024年01月19日
    浏览(45)
  • Vue3前端h5移动端页面预览PDF使用pdfjs-dist,添加自定义文本水印

    pnpm i pdfjs-dist@2.5.207

    2024年01月18日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包