首页
学习
活动
专区
圈层
工具
发布

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。...由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览器生成,使用很方便。...jsPDF实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。...通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。...来捋一下思路,将html页面内容生成canvas图片,通过 addImage将第一页图片添加到pdf中,超过一页内容,通过 addPage()添加pdf页数,然后再通过 addImage将下一页图片添加到

3.2K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Javascript 将 HTML 页面生成 PDF 并下载

    最近碰到个需求,需要把当前页面生成 pdf,并下载。...由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览器生成,使用很方便。...jsPDF实例中,也有添加html的功能,但某些元素无法生成在pdf中,因此可以使用html2canvas + jsPDF的方式将页面转成pdf。...通过html2canvas将遍历页面元素,并渲染生成canvas,然后将canvas图片格式添加到jsPDF实例,生成pdf。...来捋一下思路,将html页面内容生成canvas图片,通过 addImage将第一页图片添加到pdf中,超过一页内容,通过 addPage()添加pdf页数,然后再通过 addImage将下一页图片添加到

    5.4K20

    使用phantomjs将pyecharts生成的html渲染为png

    以前用pyecharts对每日数据可视化,无奈邮件没法发送包含js的网页,这可累坏我了。考虑了几个小时,最后决定把echarts生成的HTML文件渲染成图片在给邮件发送给各位领导。...,需要先安装 phantomjs,安装方法请参照官网 phantomjs.org/download.html 使用 from pyecharts import options as opts from...果然,全球人民还是一条心的,难得有几个遇到这个问题的人,都是说把 echarts.min.js 下载在本地,改代码的引用方式就可以了。...可是当我相信的时候,下载下来,改了路径。我想要的图片就呼啦啦的出来了。...此时,热泪盈眶~ wget https://assets.pyecharts.org/assets/echarts.min.js 下载到root的家目录,/root定义一下, file_path = "

    3.4K20

    shape文件的生成与打包下载

    概述 本文讲述如何结合Geotools实现后端shp文件的生成与打包下载。 实现效果 实现 shp文件生成 如何生成shp文件在前面的相关博文里面已经做过说明,本文不再赘述。...shp文件打包 对与一个shp文件来说,下面四个文件是必须的:.dbf、.prj、.shp、.shx,其中: 1)*.dbf为属性文件; 2)*.prj为投影文件; 3)*.shp为空间信息存储文件...; 4)*.shx为图形文件; 实现代码 1) shp生成与打包 package com.lzugis.helper; import com.vividsolutions.jts.geom.Coordinate...zipOut.close(); }catch (Exception e){ e.printStackTrace(); } } } 2) shp文件下载...,然后转换编码格式为utf-8,保证不出现乱码,这个文件名称用于浏览器的下载框中自动显示的文件名 response.addHeader("Content-Disposition"

    3.1K20

    修改Hexo自动生成的HTML文件名

    导读 我们在使用Hexo框架生成静态博客时,其实是将你写好的.md文件输出成HTML文件进行渲染,其中HTML的文件名称就是.md的文件名称。...而我们为了编辑文章方便,为了通过文件名就知道这是哪篇文章,通常是把.md文件命名成中文的甚至是文章的标题,那么生成HTML文件时也就是中文的文件名了。...(1)修改生成HTML时的命名策略 我们从Hexo是基于Node.js的,Hexo生成HTML文件这句话的到启发,Hexo肯定会获取文件夹下的所有.md文件生成HTML文件,命名格式xxx.md-->xxx.html...这时候我们会想,我们是不是可以在Hexo生成HTML文件时,修改HTML的命名策略,即将原始的命名方式改为我们自定义的命名方式? 有了思路说干就干。于是去Hexo的各个文件里去找,它是在哪转换文件的。...从你的.md文件里,如下图,在你的文章头部增加这个变量并指定一个值,这就是生成HTML时的文件名,注意也是不要和其他文件重复 ?

    2.3K30

    生成类库项目时同时生成的pdb文件是什么东东?

    而程序在上线时是不需要xml文件和pdb文件的,可以进行配置,只生成dll文件。 平时做项目时也没太注意过这个pdb文件是干什么的,刚才心血来潮,突然想搞清楚这个玩意到底有什么用? ?...定义: 生成类库项目时除了生成dll文件外,还会生成一个同名的pdb文件,它是一个程序数据库文件,保存着调试和项目状态信息,使用这些信息可以对程序的调试配置进行增量链接。 ?...理解:pdb文件包含了编译后程序指向源代码的位置信息,用于调试的时候定位到源代码,主要是用来方便调试的。 ?...在程序发布为release模式时,建议将 pdb文件删除, 同时,对外发布的时候,也把 pdb删除,有利于保护程序。...扩展:生成类库项目时不生成pdb文件: 打开类库项目属性页面→切换到生成选项卡→点击高级按钮→将调试信息一项设置为none。 ?

    1.6K10

    SpringMVC 文件下载时 浏览器不能正确显示另存的文件名

    问题:通过打印输出流的方式把文件下载到本地,但是在firebox 中 下载的文件不显示文件的文件名,造成文件不能直接打开,其他浏览器可以直接打开....原因: 主要是文件名称中有汉字而没有转码造成firebox浏览器不能正确显示另存的文件名 解决方案: //提供如下工具类将 文件名编码 就可以啦 public static String toUtf8String...kbid=816868                      if (s.length() > 150) {                          // 根据request的locale...                }              }          } catch (UnsupportedEncodingException e) {            log.error("将文件名中的汉字转为...UTF8编码的串时错误,输入的字符串为:" + s);          }          return s;      } 不兼容浏览器: firebox

    1.8K50

    将 Source Generator 生成的源代码保存到本地文件

    默认的源代码生成器所生成的代码都是没有直接存放到项目文件夹里面的,不受源代码管理工具管理,对使用方的开发者来说很难直接阅读或查找到 Source Generator 生成的源代码。...本文将和大家介绍如何使用 EmitCompilerGeneratedFiles 属性配置将生成的代码保存到本地文件 将 Source Generator 生成的源代码保存到本地,只需设置 EmitCompilerGeneratedFiles...> 完成此配置之后,将会自动将源代码生成器所生成的代码存放到本地文件夹里面。...,最后加上源代码生成器 AddSource 时设置的 hintName 作为文件名。...> 通过以上的方式即可让源代码生成器所生成的文件输出到本地文件里面,方便将生成的代码签进源代码版本控制里面,如 git 等里面,也方便进行静态代码阅读和代码审查 更多关于源代码生成博客请参阅我的

    1.1K10

    Tensorflow中保存模型时生成的各种文件区别和作用

    假如我们得到了如下的checkpoints, [sz71z5uthg.png] 上面的文件主要可以分成三类:一种是在保存模型时生成的文件,一种是我们在使用tensorboard时生成的文件,还有一种就是...plugins这个文件夹,这个是使用capture tpuprofile工具生成的,该工具可以跟踪TPU的计算过程,并对你的模型性能进行分析,这里就不想详细介绍了。...本文主要介绍前面两种文件的作用: tensorboard文件 events.out.tfevents.*...: 保存的就是你的accuracy或者loss在不同时刻的值。...保存模型时生成的文件 checkpoint: 其实就是一个txt文件,存储的是路径信息,我们可以看一下它的内容是什么: model_checkpoint_path: "model.ckpt-5000"...不过没关系,下次重新训练时,会自动从上次的断点继续训练而不用重新训练了。后面两项则表示已经保存的所有断点路径。

    1.9K40
    领券