精华内容
下载资源
问答
  • html转pdf截图保存功能的实现
    2021-04-25 14:58:48

    使用技术

    itext.jar  : 将byte文件输入流转换为图片,pdf等

    html2canvas.js :将html页面区域截图为base64编码的图片资源

    java+js

    1. 准备资源

    html2canvas.js

    www.baidu.com

    2.前端代码:

    //进行截图操作,document.querySelector("body") 为要截图的区域

    function test() {

    html2canvas(document.querySelector("body"), {

    onrendered: function (canvas) {

    var dataUrl = canvas.toDataURL('image/png');

    var formData = new FormData(); //模拟表单对象

    formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //写入数据

    var xhr = new XMLHttpRequest(); //数据传输方法

    xhr.open("POST", "http://localhost:8080/pdf"); //配置传输方式及地址

    xhr.send(formData);

    xhr.onreadystatechange = function () { //回调函数

    };

    }

    });

    }

    //格式化图片base64编码转换为byte文件流

    function convertBase64UrlToBlob(urlData){

    //去掉url的头,并转换为byte

    var bytes=window.atob(urlData.split(',')[1]);

    //处理异常,将ascii码小于0的转换为大于0

    var ab = new ArrayBuffer(bytes.length);

    var ia = new Uint8Array(ab);

    for (var s = 0;s

    ia[s] = bytes.charCodeAt(s);

    }

    return new Blob( [ab] , {type : 'image/png'});

    }

    3.后端代码:

    @RequestMapping(value = "/pdf",method = RequestMethod.POST)

    public void test(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {

    String filePath = "D:\\blog\\exportPdf2.pdf";

    String imagePath = "D:\\blog\\exportImg2.png";

    Document document = new Document();

    try{

    Map getMap = request.getFileMap();

    MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //获取数据

    InputStream file = mfile.getInputStream();

    byte[] fileByte = FileCopyUtils.copyToByteArray(file);

    FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//打开输入流

    imageOutput.write(fileByte, 0, fileByte.length);//生成本地图片文件

    imageOutput.close();

    PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf文件

    document.open();

    document.add(new Paragraph("JUST TEST ..."));

    Image image = Image.getInstance(imagePath); //itext-pdf-image

    float heigth = image.getHeight();

    float width = image.getWidth();

    int percent = getPercent2(heigth, width); //按比例缩小图片

    image.setAlignment(Image.MIDDLE);

    image.scalePercent(percent+3);

    document.add(image);

    document.close();

    }catch (DocumentException de) {

    System.err.println(de.getMessage());

    }

    catch (Exception e) {

    e.printStackTrace();

    }

    }

    private static int getPercent2(float h, float w) {

    int p = 0;

    float p2 = 0.0f;

    p2 = 530 / w * 100;

    p = Math.round(p2);

    return p;

    }

    4 包名

    import com.itextpdf.text.Document;

    import com.itextpdf.text.DocumentException;

    import com.itextpdf.text.Image;

    import com.itextpdf.text.Paragraph;

    import com.itextpdf.text.pdf.PdfWriter;

    import org.springframework.boot.SpringApplication;

    import org.springframework.boot.autoconfigure.SpringBootApplication;

    import org.springframework.stereotype.Controller;

    import org.springframework.util.FileCopyUtils;

    import org.springframework.web.bind.annotation.RequestMapping;

    import org.springframework.web.bind.annotation.RequestMethod;

    import org.springframework.web.multipart.MultipartFile;

    import org.springframework.web.multipart.MultipartHttpServletRequest;

    import javax.imageio.stream.FileImageOutputStream;

    import javax.servlet.http.HttpServletResponse;

    import java.io.File;

    import java.io.FileOutputStream;

    import java.io.IOException;

    import java.io.InputStream;

    import java.util.Map;

    4 前端截图,访问后端接口,保存截图文件到本地为pdf或者其他格式的文件。

    有兴趣的同学可以把后端改为下载文件到本地

    5 项目源码地址

    到此这篇关于html转pdf截图保存功能的实现的文章就介绍到这了,更多相关html转pdf截图保存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    更多相关内容
  • 主要介绍了java实现pdf文件截图的方法,结合实例形式分析了java基于PDFRenderer.jar进行pdf文件截图的相关操作技巧,并附带PDFRenderer.jar文件供读者下载使用,需要的朋友可以参考下
  • js 实现截屏下载导出PDF 文件,解压即可用
  • 它建立Mozilla的PDF.js之。 支持文本和矩形突出显示。 高光数据格式独立于视口,使其适合保存服务器。 示例(创建React App) 有关在线示例,请查看 。 要本地运行示例应用程序: npm install npm ...
  • 连续截屏导出PDF

    2015-02-27 19:01:40
    可以自动连续截屏并保存为PDF。 对付文库很有用哦~
  • convertpdf.js截图插件

    2020-12-22 09:23:21
    convertpdf.js截图插件是phantomjs截图时调用的插件,分为windows和linux两个版本,取决于服务器的分辨率,linux分辨率和windows两个版本不一致
  • 这是《三种Java下生成PDF方式的比较 》的原始截图
  • 佳博热敏机直接打印PDF文件到热敏纸pdf裁剪、pdf分页) 使用pdf直接打印到热敏纸,打印出来的二维码和文字会比截图清晰很多,找了很多方案,然后自己总结的一个比较简单的,方便使用的方法。
  • PDFMtEd(PDF M E牛逼ADATA埃德itor)是一套旨在简化LinuxPDF元数据的工具。 该存储库中托管的实用程序是Phil Harvey的图形前端。 目录 卸载PDFMtEd 用法 一般用法 PDFMtEd编辑器 用户界面 命令行选项 PDFMtEd...
  • 具备创建、贝茨编号、转换、注释、编辑、高强度128位AES加密、合并和保护PDF所需的所有功能,可以帮助大家创建适用于任意设备的完美文档,必要时还能进行加密来保护自己的产权,现在大家就可以像编辑Word文档一样...
  • HTML转PDF: 1.页面底层实现——Vue:最低兼容ie10  ... 所以建议截图的时候,将页面代码复制一份到隐藏域,隐藏域里面做修改,这样就不会修改页面原有样式了  如果大家有更好的方法,欢迎提议
  • 万兴PDF编辑器的帮助下,您可以添加、删除、剪切、复制、粘贴、编辑、编辑图片和许多其他操作到现有的PDF文档中。您还可以从各种格式的文档中创建PDF,如word、excel、ppt、图片、txt等。不仅如此,您还可以将PDF...
  • PHPHeadlessChrome提供了一个简单的用法帮助器类,以使用Headless Chrome实例创建PDF和/或屏幕截图。 触发网页的PDF /屏幕截图生成/字符串HTML或本地URL。 为了使用此PHPHeadlessChrome帮助程序,请确保Google ...
  • 最近公司项目需要,利用vue实现pdf导出,从而保存... 创建一个htmlToPdf .js 文件指定位置 . 我个人习惯放在 ( ‘ src /utils/htmlToPdf’ ) // 导出页面为PDF格式 import html2Canvas from 'html2canvas' import
  • 主要介绍了java实现截取PDF指定页并进行图片格式转换功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 福昕阅读器菜单栏 截图 可滑动高清截图

    福昕阅读器菜单栏 截图 可滑动高清截图

     

    展开全文
  • 本文实例为大家分享了Vue导出页面为PDF格式的具体代码,供大家参考,具体内容如下 导出为图片 1.将页面html转换成图片 npm install html2canvas --save 2.需要导出的页面引入 import ...
  • 项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面的所有的表格、svg图片和样式。 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf。 咋不上天呢…… 查了一下,能够...
  • 基于pdfbox的pdf转图片,发票pdf转图片,网络pdf转图片,基于pdfbox开发的demo,下载即用;
  • savePDF 是一个简单的函数,可以很好地裁剪 MatLAB 图形并将其保存为 PDF 到指定目录。 如果该目录不存在,则创建一个。 plot_name = 图形的名称(例如,'My_Figure') plot_path = 要保存为 PDF 的文件夹(例如,'...
  • 前端pdf预览插件pdfJS

    2021-05-28 16:06:45
    适用于前端pdf预览,低版本支持ie,最新版本不支持低版本ie
  • Android PDF转图片

    2018-09-06 12:32:44
    Android PDF转图片,PdfContext pdfContext =new PdfContext(); PdfDocument pdfDocument=(PdfDocument)pdfContext....//path为要截图pdf的路径,String类型 int pageCount = pdfDocument.getPageCount();
  • 由于工作需要为第三方部署 Openstack 私有云 ,而尝试了很多网络的教程之后,发现很多教程本身存在一些问题,倒是尝试一直失败; 最终经过夜以继日的尝试和配置,终于某一天的深夜,安装成功了,我把安装成功的...
  • PdftoWord转换器! 这是一个使用Qt / Qml 5.11编写的免费,开源的pdf到单词转换器应用程序...要Linux中安装,您可以使用最终的可移植AppImage版本。 建造 要构建该应用程序,请从Qt网站下载源代码和Qt 5.11。 支持
  • 原标题:电脑怎样快速将图片转PDF工作中文件转换的问题总是会经常出现,而出现频率最高的也就是各种文件转PDF的问题了,因为PDF文件传输方便,所以很多时候我们都需要将各种文件转换成PDF格式进行传输使用。...

    原标题:电脑上怎样快速将图片转PDF

    工作中文件转换的问题总是会经常出现,而出现频率最高的也就是各种文件转PDF的问题了,因为PDF文件传输方便,所以很多时候我们都需要将各种文件转换成PDF格式进行传输使用。比如图片转PDF的问题,就是工作中会经常遇到的问题,那么我们应该如何实现这两者之间的转换呢?下面我们就一起来看一下吧。

    参考工具:迅捷PDF在线转换器

    操作步骤:

    步骤一:将需要进行转换的图片文件在电脑上准备好,如果方便的话可以将图片拖放到桌面上,这样转换是就可以方便使用了。

    5a9620ef2df7fd409f6a761db07eab26.png

    步骤二:图片准备好后,还需要我们通过电脑浏览器搜索迅捷PDF在线转换器,来帮助我们进行转换。

    617281b42ba19f9f2772e308fee88034.png

    步骤三:进入在线转换页面后,在页面中心位置我们可以看到很多彩色的功能方格,我们需要从中选择图片转PDF的方格。

    b9af3c4d1b81f849c010f2fe096a78ec.png

    步骤四:图片转PDF的选项页面进来后,我们就可以将需要转换的图片通过点击选择文件按钮添加进来了。

    84b253c5601db61399a6a8db72995900.png

    步骤五:图片添加进来后,在图片文件下方我们还可以根据需要修改一些转换的选项。

    ca34928d50c420b329f0e4de553b06a5.png

    步骤六:上面的选项修改好后,我们就可以通过开始转换按钮开始对图片文件进行转换了。

    5da2019c7bb81cf2c7b0493a245cb8ae.png

    步骤七:图片文件转换开始后,我们只需要等待转换结束,就可以对转换后的文件进行使用了。

    96fa2b6629934bc22e6f17794f8d0d47.png

    快速将图片转PDF的问题上面已经通过借助在线转换器,为大家分享过了,希望可以对大家有所帮助啊。返回搜狐,查看更多

    责任编辑:

    展开全文
  • C# PDF 分割成图片源码

    2018-11-19 13:34:32
    用 O2S.Components.PDFRender4NET.dll, 分割PDF 文件为多种图片格式,可以调整清晰度,代码中有注释,可查看。
  • premiere pr 视频截图.pdf

    2021-09-14 13:27:05
    premiere pr 视频截图.pdf
  • 2、utils中创建htmlToPdf.js文件, // 导出页面为PDF格式 import html2canvas from "html2canvas" import JSPDF from "jspdf" export default { install (Vue, options) { Vue.prototype.Ex

    1、安装html2canvas和jspdf依赖

    npm install html2canvas --save
    npm install jspdf --save  

    2、在utils中创建htmlToPdf.js文件,

    // 导出页面为PDF格式
    import html2canvas from "html2canvas"
    import JSPDF from "jspdf"
    export default {
      install (Vue, options) {
        Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
          var element = document.getElementById("pdfCentent")
          html2canvas(element, {
            logging: true,
            useCORS: true
          }).then(function (canvas) {
            var pdf = new JSPDF("p", "mm", "a4") // A4纸,纵向
            var ctx = canvas.getContext("2d")
            var a4w = 170; var a4h = 257 // A4大小,210mm x 297mm,四边各保留20mm的边距,显示区域170x257
            var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
            var renderedHeight = 0
     
            while (renderedHeight < canvas.height) {
              var page = document.createElement("canvas")
              page.width = canvas.width
              page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页
     
              // 用getImageData剪裁指定区域,并画到前面创建的canvas对象中
              page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
              pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面,保留10mm边距
     
              renderedHeight += imgHeight
              if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容,添加一个空页
              // delete page;
            }
            pdf.save(htmlTitle + currentTime)
          })
        }
      }
    }
    

    3.main.js中引入上面那个htmlToPdf文件

    import htmlToPdf from '@/components/Utils/htmlToPdf'
    Vue.use(htmlToPdf)

    4在vue页面中调用

    <template>
     <div id="pdfCentent">
     	//这里是要导出的html内容
        <el-button @click="ExportSavePdf(htmlTitle,nowTime)">保存为PDF</el-button>
     </div>
    </template>
    <script>
     export default {
         data(){
            return{
                htmlTitle: '课程表',
                nowTime: "pdf",
            }
        },
     }
    </script>

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 38,470
精华内容 15,388
关键字:

如何在pdf上截图