首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

保存window.print()的输出,并通过ajax将其作为pdf发送到服务器

保存window.print()的输出,并通过ajax将其作为pdf发送到服务器的方法如下:

  1. 首先,确保你的网页中包含了一个用于触发打印的按钮或其他交互元素。例如,可以使用一个按钮元素,并为其添加一个点击事件监听器。
代码语言:txt
复制
<button id="printButton">打印</button>
  1. 在JavaScript中,使用window.print()方法来触发打印操作。同时,将打印的内容保存为PDF文件。
代码语言:txt
复制
document.getElementById("printButton").addEventListener("click", function() {
  // 打印页面
  window.print();
  
  // 将打印内容保存为PDF
  html2pdf().from(window.document.body).save();
});
  1. 在网页中引入html2pdf库,该库可以将HTML内容转换为PDF文件。可以通过以下方式引入:
代码语言:txt
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
  1. 使用Ajax将生成的PDF文件发送到服务器。可以使用XMLHttpRequest或fetch API来实现。
代码语言:txt
复制
document.getElementById("printButton").addEventListener("click", function() {
  // 打印页面
  window.print();
  
  // 将打印内容保存为PDF
  html2pdf().from(window.document.body).toPdf().output('datauristring').then(function (pdfData) {
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    
    // 设置请求方法和URL
    xhr.open('POST', '服务器URL', true);
    
    // 设置请求头,指定发送的数据类型为PDF
    xhr.setRequestHeader('Content-Type', 'application/pdf');
    
    // 发送PDF数据到服务器
    xhr.send(pdfData);
    
    // 监听请求状态变化
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功
        console.log('PDF已成功发送到服务器');
      }
    };
  });
});

请注意,上述代码中的"服务器URL"需要替换为实际的服务器URL,用于接收和处理发送的PDF文件。

这种方法可以将通过window.print()方法生成的打印内容保存为PDF文件,并通过Ajax将其发送到服务器。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery 点击按钮打印指定文本内容

,点击打印按钮,将订单信息填充到快递单模板中,然后 JavaScript 调用浏览器打印功能,这里只会展示项目中所涉及到主要代码,完整代码将不会在这里展示 打印页面指定部分 通过window.print...下一个回答,让我得到了答案 我们将打印部分即快递单模板放到一个 ID 为printableAreadiv中,添加一个onclick点击事件,大家也可以尝试下其他办法,这里只是提供了一种解决方案...,而打印预览却没有显示出条形码及二维码时,可能是你忘记勾选背景图片打印选项了 填入订单数据 将 ajax 请求返回数据填入到快递单模板中即可,代码如下: 打印快递单 $(".printfFrom").click(function(){ // 判断勾选订单是否为空 $.ajax...url: "{:url('order/index/getOrderGoodsByOrderIds')}", type: 'get', data: param, // 发送到服务器数据

4.1K20

JavaScript打印Excel、Word

当项目发布到服务器上后,当使用java调用打印机,无论哪台电脑访问页面,点击打印按钮,调用都是java所运行服务器打印机。...服务器 我要打印报表 收到请求,调用打印程序 怎么调用了我自己打印机,是java锅,我不背 很抱歉,报表在我这打印好了,你过来取吧!...java后台将Excel转换成html页面,调用window.print()函数打印整个页面(通用); 安装打印插件(麻烦) 使用Spring poi将Excel、Word转换为html再进行打印好处有...我采用方法是: 前台ajax访问后台转换方法 后台返回第58行content字符串,这个字符串就是整个html页面代码。 将ajax返回结果写入到一个新页面,然后打印这个新页面。...页面: ---- js打印设置: ---- 打印pdf文件: 注意: 当图表比较宽,所选纸张会出现只打印部分页面情况。

2.1K20
  • 三分钟让你了解什么是Web开发?

    最初,这些信息都是作为文本存储——这就是为什么在现在文本、媒体和文件都通过该协议进行交换情况下,名称超文本传输协议仍然存在。 2、如何保存、检索和保存信息?...这在服务器作为HTML文件保存,可以使用web浏览器查看。浏览器从服务器请求文件,服务器端起它关闭连接。 HTML是一种用于创建web页面的标准标记语言。...在用户输入信息单击submit按钮后,“创建Post”,这些表单值将通过Post发送到web服务器。可以使用任何服务器端脚本语言读取POST值。...使用Ajax,您将一个GET请求发送到服务器服务器将其响应作为输出发送,而不阻塞当前web页面,这意味着用户可以继续做任何他们正在做事情,而不会被打断。输出被追加或添加到当前网页。...我们可以使用以下三种重要方法来请求web服务器: GET:获取请求资源作为响应。 POST:向服务器提交表单数据,或者通过Ajax提交任何数据。

    5.8K30

    如何将HTML表格转换成精美的PDF

    包含表格、图表和图形 Web 应用程序通常包含将数据导出为 PDF 选项。你有没有想过,作为一个用户,当你点击那个按钮时,幕后发生了什么? 作为开发人员,如何让 PDF 输出看起来更专业?...像这样小点缀,对把一份看起来很业余文件变成一份优雅文件有很大帮助。 最近,我探索了几种生成 PDF 解决方案,建立了这个Demo 程序来展示结果。所有的代码也可以在Github上找到。...对话框还提供了将文档保存PDF 选项,这就是我们要做。...顾名思义,html2canvas 接收 HTML 内容,并将其转化为存储在 HTML 元素上图像,然后 jsPDF 接收该画布内容并将其保存。...它使用 Prince HTML-to-PDF 引擎来生成其 PDF 输出。该服务也通过 API 使用,因此你代码会碰到一个外部 API 端点,然后该端点会返回 PDF 文档。

    6.8K20

    AJAX发送POST请求

    AJAX 请求中,我们可以使用 POST 方法发送数据到服务器,以便进行处理和保存。...在 AJAX 中,可以使用 method 或 type 参数来指定请求方法。设置请求 URL:设置请求 URL,指定服务器端处理脚本路径。服务器端脚本将接收并处理 POST 请求发送数据。...设置请求头:根据需要,可以设置请求头,包括 Content-Type(指定请求体数据类型)和其他自定义头部。设置请求体数据:在 POST 请求中,数据通常被包含在请求体中发送到服务器。...data:一个包含键值对对象,作为请求体参数发送到服务器。在服务器端脚本(example.php)中,可以通过获取 POST 数据来进行处理和操作:在上述示例中,我们通过 $_POST 超全局变量来获取 POST 请求中数据,并进行相应处理。然后,我们可以生成一个响应,并将其以 JSON 格式返回给客户端。

    4K20

    ESP8266使用AJAX实现动态更新网页

    使用AJAX技术,我们可以监视实时数据而无需刷新整个网页,这不仅节省了时间,而且还节省了宝贵时钟周期。通过本文,您将学习如何在ESP8266上实现基于AJAX网络服务器。 什么是AJAX?...如前所述,AJAX表示“Asynchronous JavaScript and XML”,可用于更新网页一部分,而无需重新加载所需页面。它通过自发地请求和接收来自服务器数据来实现。...XMLHttpRequest对象将对更新后页面数据请求发送到Web服务器服务器处理该请求,在服务器端创建一个响应,然后将其发送回浏览器,然后浏览器使用JavaScript处理该响应并将其显示在网页上...AJAX工作过程 如上图所示,对于AJAX请求,浏览器使用JavaScript将XMLHttpRequest发送到服务器。该对象包含告诉服务器正在请求什么数据。服务器仅响应从客户端请求数据。...我们通过150欧姆限流电阻LED连接到ESP8266D0引脚,如您所见,我们可以使用网络服务器对其进行闪烁。接下来,我们使用LM35温度传感器,通过它我们将读取温度值并将其更新到网页。

    2.8K20

    AJAX 前端开发利器:实现网页动态更新核心技术

    AJAX - 服务器响应 在AJAX中,通过onreadystatechange属性、readyState属性、status属性和statusText属性来管理XMLHttpRequest对象状态和服务器响应...使用回调函数 回调函数是作为参数传递给另一个函数函数。...) end if %> 在上述示例中,当用户在输入字段中输入字符时,通过AJAX服务器通信,并从ASP文件中获取相应建议。...将请求发送到服务器文件 注意,将一个参数(q)添加到 URL(带有下拉列表内容) AJAX 服务器页面 - "getcustomer.php" 由上面的 JavaScript 调用服务器页面是一个名为...> 在上述示例中,当用户选择一个客户时,通过AJAX服务器通信,并从数据库中获取相应客户信息。客户信息将以HTML表格形式显示在具有 "txtHint" ID 元素中。

    12100

    AJAX基础知识与简单操作示例

    一个常见陷阱是通过来访问您网站domain.tld,但尝试使用来调用页面www.domain.tld。如果您确实需要将请求发送到另一个域,请参阅HTTP访问控制(CORS)。...send()如果POST-ing请求,则该方法参数可以是您要发送到服务器任何数据。...可能代码在W3C上列出。在以下示例中,我们通过检查200 OK响应代码来区分AJAX调用成功与否。...您可以通过两种方式访问​​该数据: httpRequest.responseText –以文本字符串形式返回服务器响应 httpRequest.responseXML–将响应作为XMLDocument可以使用...你可以看到test.xml 和更新测试脚本。 步骤5 –处理数据 最后,让我们将一些数据发送到服务器接收响应。

    1.5K20

    获取和保存数据 - 集成 - 构建文档 - ckeditor5中文文档

    CKEditor 5允许您以各种方式从中检索数据并将其保存服务器(或通常用于您系统)。 在本指南中,您可以了解可用选项及其优缺点。 与HTML表单自动集成 这是集成编辑器经典方式。...您不需要任何其他JavaScript代码即可将编辑器数据发送到服务器。 在HTTP服务器中,您现在可以从POST请求内容变量中读取编辑器数据。 例如,在PHP中,您可以通过以下方式获取它: <?...手动检索数据 当你: 使用Ajax请求而不是与HTML表单经典集成 实现单页面应用程序 使用与经典编辑器不同编辑器类型(因此,不能使用以前方法) 您可以使用editor.getData()方法从编辑器中检索数据...自动保存功能允许您在需要时(当用户更改内容时)自动保存数据(例如,将其发送到服务器)。...假设您实现了一个saveData()函数,该函数将数据发送到服务器返回一个成功保存数据后解析promise,配置自动保存功能就像下面这样简单: ClassicEditor .create( document.querySelector

    3.8K20

    js打印WEB页面内容代码大全

    打印 第二种方法:指定打印区域 把要打印内容放入一个 span或div,然后通过一个函数打印。...第三种方法:如果要打印页面排版和原web页面相差很大,采用此种方法。 点打印按钮弹出新窗口,把需要打印内容显示到新窗口中,在新窗口中调用window.print()方法,然后自动关闭新窗口。  ...(1,1) 打开 Web.ExecWB(2,1) 关闭现在所有的IE窗口,打开一个新窗口 Web.ExecWB(4,1) 保存网页 Web.ExecWB(6,1) 打印 Web.ExecWB(7,1)...___________________") //输出打印内容 objprinter.Writeline("| |") objprinter.Writeline("| 您打印数据是:"&label&...server.CreateObject("adodb.recordset") rs.Open(“select ……”),conn,1,1 ……….%> //与数据库进行交互 HTML页面编码: ……… //调用打印函数 > //保存服务器端传来数据

    7.5K20

    带你认识 flask ajax 异步请求

    在这两种类型请求中,服务器通过直接发送新网页或通过发送重定向来完成请求。然后客户端用新页面替换当前页面。只要用户停留在应用网站上,该周期就会重复。...当提供翻译链接并且用户点击它时,我需要将Ajax请求发送到服务器服务器将联系第三方翻译API。一旦服务器发送了带有翻译文本响应,客户端JavaScript代码将动态地将该文本插入到页面中。...} 07 来自客户端 Ajax 因此,现在服务器能够通过*/translate* URL提供翻译,当用户单击我上面添加“翻译”链接时,我需要调用此URL,传递需要翻译文本、源语言和目标语言。...该函数将利用输入和输出DOM节点以及源语言和目标语言,向服务器发出携带必须三个参数异步请求,并在服务器响应后用翻译后文本替换翻译链接。...为了生成引用这个图像URL,我使用url_for()函数,传递特殊路由名称static给出图像文件名作为参数。

    3.8K20

    浏览器分页静默打印

    作为前端开发,在浏览器上打印算是一个比较常见需求了。最简单做法就是直接打印整个网页,在浏览器直接打印或者调用window.print()。 这样就能将当前页面整个打印出来了。...这里介绍两个最简单方法: 方法一:直接调用window.print()。 调用之前将不需要被打印元素先通过display: none隐藏掉,当打印执行完毕再将其显示display: block。...下面介绍一下本人设计实现方案: 具体打印方案 首先从接口拿到数据并将其转换成下面的数据结构。其核心就是 pageList,这个 pageList 保存就是打印时候每页用到数据和相关配置。...else { pageList[currentPage - 1].list.push(item); } }); return pageList; }; 不难看出,上述方法最终输出是一个大...这个 socket 服务和我们服务器上启动服务是一样,只不过此服务是直接部署到我们用户本地机器上,只给当前用户使用。 此 Socket 服务端,监听一个端口,比如:18877。

    63410

    jquery.datatables 分页功能

    DataTables将向服务器发送一些变量,以允许它执行所需处理,然后以DataTables所需格式返回数据。 服务器端处理通过使用该serverSide选项启用,使用配置ajax。...返回数据 一旦DataTables提出了数据请求,将上述参数发送到服务器,则期望将JSON数据返回给它,设置以下参数: { draw -- int // 绘图计数器,该对象是对draw作为数据请求一部分发送参数响应...' } ); 通过ajax选项配置DataTables如何配置Ajax请求。...在上面的例子中,我们使用它作为一个字符串,它指示DataTables使用其默认设置进行Ajax请求。但是,您可以通过ajax作为对象传入来自定义这些设置。...示例数据 使用数组作为数据源服务器端处理返回示例(完整示例): image.png 使用对象服务器端处理返回示例,DT_RowIdDT_RowData附带并作为数据源(完整示例): image.png

    5K20

    SpringMVC(十二):SpringMVC文件下载

    ResponseBody public List getAllPlayer(){ return playerService.getAllPlayer(); }}二、下载基本流程文件上传是将用户本地资源发送到服务器...,让服务器存储到其硬盘中过程。...而下载和上传正好是相反过程。下载是用户发起请求,请求要下载资源。服务器根据请求,将其硬盘中文件资源发送给浏览器过程。...三、下载请求数据用户通过浏览器发起下载请求,服务器在接收到请求后,根据当前请求用户信息,去数据库中获取当前用户要下载资源文件路径,然后服务器再去其硬盘中读取对应文件,将文件响应给浏览器,基于此过程...,下载请求请求数据为:简单下载:文件路径直接作为一个字段存储在用户信息表中用户ID。

    569221

    AJAX如何向服务器发送请求?

    这样方式会导致用户等待页面重新加载,并且无法提供流畅用户体验。而AJAX技术使得可以在后台与服务器通信,获取服务器数据更新页面的部分内容,而无需刷新整个页面。...最后,通过responseText属性获取服务器响应内容,并将其更新到页面的指定元素中。使用AJAX发送POST请求对于需要向服务器提交数据场景,一般使用POST请求。...同时,也可以通过AJAX以异步方式将表单数据发送到服务器进行处理。...无限滚动:当页面中包含大量数据时,可以使用AJAX实现无限滚动效果。通过监听滚动事件,当用户滚动到页面底部时,通过AJAX请求加载更多数据,并将其追加到页面中,从而实现流畅数据展示。...购物车更新:在电商网站中,用户将商品添加到购物车中时,可以通过AJAX将商品信息发送到服务器,实现购物车实时更新和交互。

    50930

    前端经典面试题(有答案)_2023-03-01

    它是一种在无需重新加载整个网页情况下,能够更新部分网页技术。通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页情况下,对网页某部分进行更新。...= Symbol(); context[fn] = this; //this指向调用call函数 // 执行函数返回结果 相当于把自身作为传入context方法进行调用了 return...(将链接指向某网站); (2)攻击类型 XSS 可以分为存储型、反射型和 DOM 型: 存储型指的是恶意脚本会存储在目标服务器上,当浏览器请求数据时,脚本从服务器传回执行。...反射型指的是攻击者诱导用户访问一个带有恶意代码 URL 后,服务器端接收数据后处理,然后把带有恶意代码数据发送到浏览器端,浏览器端解析这段带有 XSS 代码数据后当做脚本执行,最终完成 XSS 攻击...⽤户浏览器接收到响应后解析执⾏,前端 JavaScript 取出 URL 中恶意代码执⾏。 恶意代码窃取⽤户数据并发送到攻击者⽹站,或者冒充⽤户⾏为,调⽤⽬标⽹站接⼝执⾏攻击者指定操作。

    1.3K20

    AJAX 中创建 XMLHttpRequest 对象方法和常用属性、方法

    通过 AJAX,我们可以在不重新加载整个网页情况下,与服务器进行数据交换更新部分页面内容。在实现 AJAX 过程中,创建一个 XMLHttpRequest 对象是必不可少。...对象,并将其赋值给变量 xhr。...正在接收服务器返回数据。4:已完成。数据已接收完毕,可以通过 responseText 或 responseXML 属性获取完整服务器响应。...参数 data 可以是要发送到服务器数据,在 POST 请求中常用。abort():取消已发送 AJAX 请求。...然后,通过 send() 方法发送请求,并将需要发送数据作为参数传递给 send() 方法。在这个示例中,我们将一个包含用户名和密码对象进行了 JSON 序列化,并作为请求体发送到服务器

    40630

    【JavaEE初阶】Servlet (三)MessageWall

    针对以上问题,我们解决思如如下: 让服务器来存储用户提交数据,由服务器保存. 当有新浏览器打开页面的时候,从服务器获取数据. 此时服务器就可以用来存档和读档....浏览器按照什么格式来解析 在我们留言墙程序中,以下环节涉及到前后端交互: 点击提交,浏览器把表白墙信息发送到服务器这里 页面加载,浏览器从服务器获取到表白信息....通过fiddler得到: 通过dopost 执行: 通过resp.setStatus(200);回到回调函数: 读档:根据ajax创建GET响应: 打开fiddler...,发送GET请求,从服务器获取到数据添加到页面中 $.ajax({ type:'get', url:'message',...但是以上重启服务器后数据就消失了,所以我们可以把数据写入数据库中进行长久保存.

    16020
    领券