精华内容
下载资源
问答
  • jspdf html页面生成pdf

    2018-01-15 15:28:52
    jspdf html页面生成pdf j jspdf html页面生成pdfspdf html页面生成pdf
  • jspdf 导出页面内容

    2018-08-18 11:02:49
    jspdf ie 兼容 内容丰富。
  • 如果,html2canvas已经设置 useCORS 为 true,即已经开启图片跨域,但是,仍然能将页面中图片在导出的pdf中显示出来。 那么,可能就是浏览器的问题,换个浏览器吧,换谷歌浏览器或IE浏览器试试。 我就被这个问题坑...

    如果,html2canvas已经设置 useCORS 为 true,即已经开启图片跨域,但是,仍然不能将页面中图片在导出的pdf中显示出来。
    那么,可能就是浏览器的问题,换个浏览器吧,换谷歌浏览器或IE浏览器试试。 我就被这个问题坑了一整天。最后,实在没办法了,我突然想到换谷歌浏览器试试,然后,就发现代码正确,图片也显示了。所以,以后尽量用谷歌浏览器进行前端开发。不用QQ浏览器。[泪目]

    展开全文
  • 基于html2canvas+jspdf实现html页面转pdf import html2canvas from "html2canvas"; import JsPDF from "jspdf"; /** * path: src/utils/htmlToPdf.js * name: 导出页面为pdf格式 */ const htmlToPdf = { get...

    基于html2canvas+jspdf实现html页面转pdf

    import html2canvas from "html2canvas";
    import JsPDF from "jspdf";
    
    /**
     * path: src/utils/htmlToPdf.js
     * name: 导出页面为pdf格式
     */
    
    const htmlToPdf = {
      getPdf(title) {
        html2canvas(document.querySelector("#pdfDom"), {
          allowTaint: true,
        }).then((canvas) => {
          // 内容宽度
          let contentWidth = canvas.width;
          // 内容高度
          let contentHeight = canvas.height;
          // 一页pdf显示生成html页面的canvas高度 a4纸的尺寸[592.28, 841.89]
          let pageHeight = (contentWidth / 592.28) * 841.89;
          // 未生成pdf的html页面高度
          let leftHeight = contentHeight;
          // 页面偏移
          let position = 0;
          // html页面生成的canvas在pdf中图片的宽高
          let imgWidth = 592.28;
          let imgHeight = (592.28 / contentWidth) * contentHeight;
          // canvas转图片数据
          let pageData = canvas.toDataURL("image/jpeg", 1.0);
          // 新建JsPDF对象
          let PDF = new JsPDF("", "pt", "a4");
          // 判断是否分页
          if (leftHeight < pageHeight) {
            PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
          } else {
            while (leftHeight > 0) {
              PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
              leftHeight -= pageHeight;
              position -= 841.89;
              if (leftHeight > 0) {
                PDF.addPage();
              }
            }
          }
          // 保存文件
          PDF.save(title + ".pdf");
        });
      },
    };
    
    export default htmlToPdf;
    
    展开全文
  • jsPDF页面转为pdf

    2018-11-29 14:48:21
    通过jspdf插件,将前段html转为pdf格式输出demo,无需后端服务器参与
  • Vue 结合html2canvas和jsPDF实现html页面转pdf 安装 npm install html2canvas npm install jspdf 使用 htmlToPdf.js文件路径,例中为src/common/utils/htmlToPdf.js import html2canvas from “html2canvas” import ...

    Vue 结合html2canvas和jsPDF实现html页面转pdf

    安装 npm install html2canvas npm install jspdf
    使用 htmlToPdf.js文件路径,例中为src/common/utils/htmlToPdf.js import html2canvas from “html2canvas” import JsPD Ffrom “jspdf”

    /**

    • @param ele要生成 pdf 的DOM元素(容器)

    • @param padfName PDF文件生成后的文件名字

    • */

    export default {
      install(Vue, options) {
        Vue.prototype.getPdfFromHtml = function (ele, pdfFileName) {
          let eleW = ele.offsetWidth // 获得该容器的宽
          //   let eleH = ele.offsetHeight // 获得该容器的高
          let eleH = ele.scrollHeight // 获得该容器的高
          let eleOffsetTop = ele.offsetTop // 获得该容器到文档顶部的距离
          let eleOffsetLeft = ele.offsetLeft // 获得该容器到文档最左的距离
          var canvas = document.createElement("canvas")
          var abs = 0
          let win_in = document.documentElement.clientWidth || document.body.clientWidth // 获得当前可视窗口的宽度(不包含滚动条)
          let win_out = window.innerWidth // 获得当前窗口的宽度(包含滚动条)
          if (win_out > win_in) {
            // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
            abs = (win_out - win_in) / 2 // 获得滚动条宽度的一半
          }
          canvas.width = eleW * 2 // 将画布宽&&高放大两倍
          canvas.height = eleH * 2
          var context = canvas.getContext("2d")
          context.scale(2, 2) // 增强图片清晰度
          context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
          html2canvas(ele, {
            dpi: 300,
            useCORS: true //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
          }).then(canvas => {
            var contentWidth = canvas.width
            var contentHeight = canvas.height
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = (contentWidth / 592.28) * 841.89 // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
            //未生成pdf的html页面高度
            var leftHeight = contentHeight
            //页面偏移
            var position = 0
            //a4纸的尺寸[595.28,841.89],单位像素,html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28
            var imgHeight = (595.28 / contentWidth) * contentHeight
            var pageData = canvas.toDataURL("image/jpeg", 1.0)
            var pdf = newJsPDF("", "pt", "a4")
            //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
              //在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
              pdf.addImage(pageData, "JPEG", 5, 0, imgWidth, imgHeight)
              // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
            } else {
              // 分页
              while (leftHeight > 0) {
                pdf.addImage(pageData, "JPEG", 5, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= 841.89
                //避免添加空白页
                if (leftHeight > 0) {
                  pdf.addPage()
                }
              }
            }
            pdf.save(pdfFileName + ".pdf")
          })
        }
      }
    }
    
    修改main.js文件
    import htmlToPdf from "@/common/utils/htmlToPdf"
    Vue.use(htmlToPdf)
    
    vue文件中使用
    this.getPdfFromHtml(this.$refs.sprintReport, this.reportInfo.title)
    获取对应的ref即可
    

    存在问题
    相当于截屏,只能获取当前区域。如果存在滚动条,下一屏则获取不到。

    展开全文
  • html2canvas+JsPDF 安装准备: ...npm install jspdf ...在需要时用的页面引入: import html2canvas from "html2canvas"; import JsPDF from "jspdf"; 具体使用方法: exportPdf() { let shareContent = docume...

    html2canvas+JsPDF

    安装准备:

    npm install html2canvas
    npm install jspdf 
    

    在需要时用的页面引入:

    import html2canvas from "html2canvas";
    import JsPDF from "jspdf";
    

    具体使用方法:

    exportPdf() {
          let shareContent = document.querySelector("#exportPdf"), //需要截图的包裹的(原生的)DOM 对象
            width = shareContent.offsetWidth, //获取dom 宽度
            height = shareContent.offsetHeight, //获取dom 高度
            canvas = document.createElement("canvas"), //创建一个canvas节点
            scale = 2; //定义任意放大倍数 支持小数(主要用于导出pdf模糊时使用)
          canvas.width = width * scale; //定义canvas 宽度 * 缩放
          canvas.height = height * scale; //定义canvas高度 *缩放
          canvas.style.width = shareContent.offsetWidth * scale + "px";
          canvas.style.height = shareContent.offsetHeight * scale + "px";
          canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
          let opts = {
            scale: scale, // 添加的scale 参数
            canvas: canvas, //自定义 canvas
            logging: true, //日志开关,便于查看html2canvas的内部执行流程
            width: width, //dom 原始宽度
            height: height,//dom 原始高度
            useCORS: true // 【重要】开启跨域配置,
          };
    
          //当x轴出现滚动条的时候;
          if (window.pageXOffset > 0) {
            opts.x = window.pageXOffset; //x轴的偏移量
            opts.windowWidth= shareContent.scrollWidth;//dom元素的实际宽度
          }
          //当y轴出现滚动条的时候;
          if (window.pageYOffset > 0) {
            opts.y = $("#exportPdf").offset().top;//dom元素距离顶部的高度
            opts.windowHeight= shareContent.scrollHeight;//dom元素的实际高度
          }
          html2canvas(shareContent, opts).then(canvas => {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = (contentWidth / 552.28) * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 20;
            //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 555.28;
            var imgHeight = (552.28 / contentWidth) * contentHeight;
            var pageData = canvas.toDataURL("image/jpeg", 1.0);
            var PDF = new JsPDF("", "pt", "a4");//设置pdf格式,默认为竖列展示
            if (leftHeight < pageHeight) {
              PDF.addImage(pageData, "JPEG", 20, 30, imgWidth, imgHeight);
            } else {
            //多页pdf设置
              while (leftHeight > 0) {
                PDF.addImage(pageData, "JPEG", 20, position, imgWidth, imgHeight);
                leftHeight -= pageHeight;
                position -= 841.89;
                if (leftHeight > 0) {
                  PDF.addPage();
                }
              }
            }
            PDF.save("导出的文件的名字.pdf"); // 这里是导出的文件名
          });
        },
    
    展开全文
  • <script src=...</script> <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script> var exportUtil = (function () { /*思路: 1.将DOM转...
  • 因此,需要用到 html2canvas 插件和 jspdf 这两个插件。 1、引入 html2canvas 和 jspdf npm install html2canvas npm install jspdf --save 2、项目内引入 import html2canvas from 'html2canvas' imp...
  • import jsPDF from 'jspdf' html2canvas( document.getElementById('content_pdf') as any, { allowTaint: true, useCORS: true, } ).then(function(canvas) { // document.body.appendChild.
  • jspdf,添加新页面,坐标(jspdf, add new page, coordinates)我正在使用jspdf进行html到pdf的转换。第一页正在完美呈现内容。 但是当涉及到第二页时,当我使用doc.cell(10, 10, cellWidth, 10, txt, j); 它显示在...
  • 加载两个js文件: <script type="text/javascript" src="../../../js/...</script> <script type="text/javascript" src="../../../js/jspdf.debug.js"></script> 导出方法: function ...
  • //内容图片这里不需要留白的距离 console.log(pdfX,pdfY,imgX,imgY) // pdfX,pdfY为pdf的大小,imgX,imgY为内容图片的大小 let PDF = new jsPDF('', 'pt', [pdfX, pdfY]) // 7.5 为坐标,让img在pdf中水平垂直居中...
  • jspdf

    2019-12-02 11:47:34
    使用jspdf和html2canval实现...script src="./static/js/libs/jspdf/jsdpf.min.js"></script> <script src="./static/js/libs/jspdf/html2canvas.min.js"></script> function handleDownlo...
  •  但是老外做的很多东西没考虑过英文之外的语言,这个也例外,支持中文,而且页面还原度也不是很好。  网上实例导出的是 A4 大小,用到的是addImage,以及需要html2canvas库。其实就是把需要导出的网页,利用 ...
  • JsPDF

    2019-09-27 14:12:29
    * 说明 JsPDF.js 导出html页面为pdf 还有很多 在此只有说着一种 *jspdf-api-path: http://rawgit.com/MrRio/jsPDF/master/docs/global.html *功能简单 只是为了打个标记 有前端功底的 可以看一下文档和源码 */ ...
  • <p>I want to make a multiple page PDF file using jspdf library. I used this code. But when this code is used, there is no margin(top) from 2page. I want to make multiple page and clear margin about ...
  • Vue使用jspdf导出页面为PDF格式

    千次阅读 2019-05-14 14:22:21
    安装两个依赖 ...cnpm install jspdf --save 把htmlToPdf.js(在上传中心可以找到我上传的这个js)放到文件夹中,这里放到的是“src\components\base” 在main.js里引用 import htmlToPdf from './compon...
  • 页面包含后台加载的数据,直接转换为图片,下载为pdf. 经过查看各个大佬的博客,得出以下解决方法。 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> ...
  • JSPDF(解决了全页面截图文图),亲测可用。大家可以放心下载
  • jsPDF

    千次阅读 2017-08-23 10:55:46
    jsPDF总结 1 jsPDF的学习 1.1 学习的内容 jsPDF 是一个基于 HTML5 的客户端解决方案,用于生成各种用途的 PDF 文档。使用方法很简单,只要引入 jsPDF 库,然后调用内置的方法就可以了。 浏览器兼容性: E 10...
  • jspdf实现页面下载生成pdf文件

    千次阅读 2017-02-16 14:43:20
    jspdf实现页面下载生成pdf文件 一路辛酸就多说了,经历了各种尝试,最后终于搞定,直接贴代码: function pdfCreater(){  html2canvas(document.body, { onrendered: function(canvas) { var imgData = ...
  • jspdf插件实现jsp页面导出为pdf文件

    千次阅读 2019-03-16 15:50:10
    最近在公司里实习作项目,项目中有一个优化需求,就是将指定的jsp页面导出为pdf文件输出。因为之前从未了解过相关方面只知识,所以在查了一番资料后,发现大家写的都很散,不是很清楚,甚至有的代码执行出来,能...
  • 这是页面(这是一个有几种不同内容类型的测试站点)但PDF看起来像这样:我正在拉jspdf.debug.js并在我的页面中有以下HTML按钮脚本: Generate PDFfunction demoFromHTML() {var pdf = new jsPDF('p', 'pt',...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,416
精华内容 566
关键字:

jspdf不需要页面