【flask开启进程,前端内容图片化并转pdf-会议签到补充】

flask开启进程,前端内容图片化并转pdf-会议签到补充

  • flask及flask-socketio开启threading
  • 页面内容转图片转pdf
    • 流程
    • 前端主js代码
    • 内容转图片-browser端
    • browser端的同步编程
    • flask的主要功能route,def
  • 总结

用到了pdf,来回数据转发和合成,担心flask卡顿,响应差,于是刚好看到threading方面的介绍,下面详细介绍这两个方面,难点是异步方法的衔接.通过此文期望
让读者对Promise的使用,aysc方法的定义,await,和then的含义有所得.然后可以以此为关键词,解决工作中的一些问题.

flask及flask-socketio开启threading

socketio的开启方法有所差别,不是app中threading=True而是

socketio = SocketIO(app, async_mode='threading',cors_allowed_origins='*' ,message_queue= app.config['REDIS_URL']) 

重新启用WERKZEUG 产生了 ‘WERKZEUG_SERVER_FD’ error,从网上发现,很多werkzeug版本出现过这个问题,而且建议回到2.0.0,可以解决,也不管是什么应用了.其中一个是notebook.我pip list了一下目前版本,3.0.3和flask一个版本.显然回去是不可能的.专门搜素WERKZEUG 和这个错误,在他的官方issu中
https://github.com/pallets/werkzeug/issues/2368

 thanks for the hint. Apparently, it was set in systemd service file, removing that solved the issue.# required to disable Flask debugging banner: "Serving Flask app (lazy loading) ..."
Environment="WERKZEUG_RUN_MAIN=true"

这是作为独立服务的吧.于是我抱着试试看的心里,在flask的配置中加入了这个选项.我想flask的官方文档肯定有相关的说明.而找起来,看似找起来不是太方便.于是瞎猜

app.config['WERKZEUG_RUN_MAIN']=True  # async_mode='threading',

再去启动,不再报错.
测试了gunicorn也正常.到此,虽然flask-socketio限制了worker只能是1,.这样起码threading用起来,会顺畅不少.另外 soketIO这个库,可以启用多worker模式,做一些相关配置.在它的官方说明有说.而且必定可以作为flask,扩展.因为官网也说了.只是目前用起来flask-socketio,不再去测,而且soketIO可以工作的在三种模式,websocket,polling-long.和***忘记了.这个话题暂时到这,下面说转换页面内容,到可打印,而不是可复用.因为是图片,应用性很差.

页面内容转图片转pdf

签到表上次的签到表打印用到了datatable和vue,我这次实现打印的时候, 转到了jquery 操作bootstrap grid.当我费劲把内容呈现在表格样的grid网格里的时候,我发现照样不能打印 说是响应式内容,没有打印风格,于是上路折腾到能打印.中途真想换table. 因为数据从竖排,硬是弄成横竖转换,扯成平的,其实是按照竖向走的,相当于中国古书的样式.从左向右排列,中间还无序分组.12一组,234一组,567一组.每组一个表头.
147
258
369
排列到,一行数据147,一个序列,三个序列.
这个不是重点,只是,完事以后,发现,无法打印.

流程

文件结构组织.
main.html, --含有iframe 和导航
tppint.html- 打印的html原始数据,靠js加载,含有主业务代码,和转换代码
app.py,- 服务器接受图片,转换成pdf,发送回去

Created with Raphaël 2.3.0 main开始,含iframe,src=tpprint tprpint onload加载布局 tprpint $get页面数据 tprpint toPng 转图片 图片格式正常 tprpint fetch post图片 return pdf pdf获取正常 显示可打印的pdf结束 yes no yes no

前端主js代码

在tpprint.html中的处理toPng,和fetch api/putpng2pdf的异步请求代码,指望的main.html调用.结果在自己 onload中,数据加载末尾$.get,处理的结束调用了,我不知道如何捕获他的结束.也许可以重构成返回Promise的函数.很费事的.填空了一下.

 window.asyncprt = async function asyncprt() {// 模拟异步操作,如网络请求return new Promise((resolve, reject) => {var node=document.getElementById('main')domtoimage.toPng(node,{ quality: 1 }).then(async function (dataUrl) {const response = await fetch('./api/putpng2pdf', { method: 'POST', body: JSON.stringify({ dataurl: dataUrl}), headers: { 'Content-Type': 'application/json' } });const arrayBuffer= await response.arrayBuffer()const blob = new Blob([arrayBuffer], { type: 'application/pdf' });// 创建一个URL指向Blob对象const blobUrl = URL.createObjectURL(blob);// 打开新的标签页并导航到PDF文件的URLwindow.open(blobUrl,"_self");resolve('Function finished!');//   window.location.href= "/img/tp.pdf?t="+ Math.floor(Math.random() * 1000);//  console.log( r)});});    };

在文件末尾是,注释掉的,pdf文件暂存,server硬盘,然后,结束来取.后改成,略过存文件,只是一次性,实时的. 直接flask,BytesIO内存托转.回来一个附件是pdf的流.下面是两方面的细节
如果在用await 调用 一个返回Promise的ayse函数,那么在得到 resolve(‘Function finished!’);语句后,你的调用程序,才会继续执行下去.这是多线程同步的一个通信机制.本来我想在frame外的main.html使用,然后,因为onload,$get没有明显的结束渲染数据的节点,改成了现在这个嵌套引用.

内容转图片-browser端

上次的签到表转图片用的dom-to-image是6年前的老项目,知道他可以纯js引用,他网站有说明.

var node=document.getElementById('main')domtoimage.toPng(node,{ quality: 1 }).then(async function (dataUrl) {})

可以换toJpeg,也是一样的,数据大一倍.png看似好一点,这个dataurl是base64编码.方便post参数传输,还有一个是blob,方便本地呈现,就和pdf呈现一样.在处理回来数据里有体现blob的处置方式.

browser端的同步编程

涉及到,数据渲染,和图片数据post给后端,有三个事件,分先后.1,onload,2, $.get 取到数据 并给页面赋值 3,.fetch succeed putpng2pdf.将图片dataurl post json给flask API并取得,回程的pdf 附件信息.
上面的[前端主js代码]章节ayncprt是其中的 第三步
第二步末尾,调用asyncprt,我发现 permisA.then(asyncprt)这样是不行的,大概,因为get返回后就已经退出可then了.还有就是,get可能会执行两次.所以设置了一个!done,不一定对的.

var permisA= $.get("/api/gettp",function(data){stas=JSON.parse(data )if (! done  )Object.keys( stas).forEach(function(key) {}asyncprt()})

传参数还不太会,所以就先这样.
第一步的结束,也就是.页面静态内容加载完成,就可以执行第二步.


$().ready(()=>{
$.get("/api/gettp")..................

虽然以上是执行的反顺序.但是可以做为编码的顺序
因为像上传,转换这样的事情,前后端反复调试.前端有个按钮,带个控制台,来看输出,静态tpprint.html长这样.

  <button type="button" class="btn btn-success"  onclick='printme()'> 下载打印</button></li>   
<div   id="main">     
<div class="container"   >
<div class="row" > <div class="col-sm-12"> 
<h3 align='center'>重要会议补充信息登记表</h3><h4 align="right"> 签到2号表 日期:<span id="day"></span></h4> </div> </div></div>
<div class="container" id="gd" ></div></div>

有个难点是默认情况,出来的图片,会有偏移.显示一半.因为对于contain对象, css的语法, dom-to-image 已经无法全部掌握. 不怪它,浏览器也不懂怎么打印.所以,最后

让它纯粹一点,为了防止边距问题,让它固定起来,且加入三个依赖.

<link href="/static/bootstrap.min1.css" rel="stylesheet"  ><script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/dom-to-image.min.js"></script>
<style>#main {display: block;width:1274px;height:778px;background-color: #ffffe1;}</style>

这样大致就能用起来了. 最后,这种嵌套的3步骤顺序之所以会被我整出来.是因为我把它放在 主体中的main.html的iframe下.想在加载,生成图片和pdf后,直接显示出来.在我从iframe外围触发打印按钮时开始, 调用asynprt.结果.只有页面标题,不得已,反复想. 然后发现,在 g e t 完成数据后把 a s y n p r t 放入 . 只要 i f r a m e 加载全部完成 , 就能得到图片 . 在 m a i n . h t m l 无法定位 i f r a m e 中 t p p r i n t 全部完成的时间点 . i f r a m e W i n d o w . o n l o a d 他是表示前置静态内容结束 . 不是 j q u e r y 的 get完成数据后把asynprt放入.只要iframe加载全部完成,就能得到图片.在main.html无法定位iframe中tpprint全部完成的时间点. iframeWindow.onload 他是表示前置静态内容结束.不是jquery的 get完成数据后把asynprt放入.只要iframe加载全部完成,就能得到图片.main.html无法定位iframetpprint全部完成的时间点.iframeWindow.onload他是表示前置静态内容结束.不是jquery.get, 也不是get 里的data. 结束布局.所以外部根本不知道, 替代方案interval(function(),timesec).去间隔查询主体某个元素.这样很笨拙的 操作.
以下是main,html的内容

  <h3 align="center">打印</h3><button   onclick="test()"></button><script> async  function   test() {var iframeWindow = document.getElementById('myif');iframeWindow.contentWindow.location.href="./tpiframe.html" iframeWindow.onload =  async () => {}};</script><iframe id="myif" src='/tpprint.html'  style="display: ; width:1300px;height:800px"></iframe>

最终fetch(‘/api/putpng2pdf’)结束有返回pdf附件后,更新整体 页面

     window.open(blobUrl,"_self");

就在main.html页的iframe中 使用服务器的返回pdf,加载为打印窗口,显示结果如下.
在这里插入图片描述
在iframe所处的main,加入导航是个挺好的办法. ,直接出现打印窗户有点别扭那就没有导航了.
不可避免的是,iframe完成加载的会闪烁到pdf. 因为必须呈现才有图片,有图片才能转pdf.
接下来说flask的后台,实现转换和return send_file

flask的主要功能route,def

依赖 img2pdf,比较完美,什么也不用管,一个covert搞定.要说的是,使用BytesIO,以及,def的return send_file.以及base64. covert可以接受bytes.file_path 或file指针这三种参数.

from flask import send_file
import img2pdf
from io import BytesIO
@app.route("/api/putpng2pdf",methods=['POST'])
def putpng2pdf():data = request.get_json()print()import base64dataraw=base64.b64decode(data['dataurl'][22:])f_io=png2pdf(dataraw)f_io.seek(0)return  send_file(f_io, as_attachment=True,download_name='tp.pdf',mimetype='application/pdf')
def png2pdf(inraw):bytes_io = BytesIO(inraw)out_io= BytesIO()print (len(inraw))#"../img/tp.pdf"# with open(filename ,'wb') as out:out_io.write(img2pdf.convert(bytes_io))return out_io

这里定义png2pdf参数字节数组,返回,BytesIO

out_io.write(img2pdf.convert(bytes_io))
其它:

  1. 取post参数,发送方式是json,可以request.get_json()这样取得. 还有一种方式是form-data.在 p o s t , 或 post ,或 post,.ajax,或fetch中有contentype参数定义.
  2. 在flask的route处理中,base64要把头部去掉,只留纯编码串,经过一次decode,得到原始数据,
  3. 送给png2pdf.
  4. 从pdf,字节bytesIO对象,生成return
    send_file(f_io,as_attachment=True,download_name='tp.pdf',mimetype='application/pdf'),这是直接变成pdf数据流的方式. 以pdf附件方式发送http回应,因为f_io是缓冲区BytesIO内存,模仿文件的对象.所以运行提升必须有download_name参数指定名字. 可见send_file可以发送文件,对象, 字符串文件名.
  5. 这就到了前端处理了
    在收到回应后浏览器的任务是显示pdf.体现在 tpprint.html的fetch url的处理中如下:
  const arrayBuffer= await response.arrayBuffer()const blob = new Blob([arrayBuffer], { type: 'application/pdf' });// 创建一个URL指向Blob对象const blobUrl = URL.createObjectURL(blob);// 打开新的标签页并导航到PDF文件的URLwindow.open(blobUrl,"_self");

大概await就相当于then所以,等待respone.arraryBuffer()然后继续得到Blob.一个浏览器可显示的字节包装类.png和jpeg应该也都有这种方式,这里是pdf,dom-to-image也能转化成blob
这一大段都是baiduAI问答提供的,相当准确,还有注释. 只有提问,js get pdf and show .凑一些词语给一些答案. 犹如复杂的事变条理.绝不会出现我这样的行文.
将来我这样的混乱文笔会是个稀罕玩意.主打一个缭乱.

总结

本文的两个问题,都不大,开始threading和 响应式页面,转打印.其中第一个问题需要,设定参数值,不然报错.第二个问题,很难有系统化的解决方法.都是在试错中前进. 也许有成熟的方法.但是都是成体系,成套路的.这里复述一次页面内容转pdf打印界面的文件结构组织.
main.html, --含有iframe 和导航
tppint.html- 打印的html原始数据,靠js加载,含有主业务代码,和转换代码,
app.py,- 服务器接受图片,转换成pdf,发送回去
然后我就转去画流程图了.画完用了很久,大小朋友,有需求,可以想想,那个流程图.
完毕.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468820.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

聊一聊Spring中的自定义监听器

前言 通过一个简单的自定义的监听器&#xff0c;从源码的角度分一下Spring中监听的整个过程&#xff0c;分析监听的作用。 一、自定义监听案例 1.1定义事件 package com.lazy.snail;import lombok.Getter; import org.springframework.context.ApplicationEvent;/*** Class…

VMWareTools安装及文件无法拖拽解决方案

文章目录 1 安装VMWare Tools2 安装vmware tools之后还是无法拖拽文件解决方案2.1 确认vmware tools安装2.2 客户机隔离2.3 修改自定义配置文件2.4 安装open-vm-tools-desktop软件 1 安装VMWare Tools 打开虚拟机VMware Workstation&#xff0c;启动Ubuntu系统&#xff0c;菜单…

ADC前端控制与处理模块--AD7606_Module

总体框架 AD7606_Module主要由3个模块组成组成&#xff0c;AD7606_Data_Pkt和AD7606_Drive以及AD7606_ctrl。 1.AD7606_Data_Pkt主要作用是把AD芯片数据组好数据包&#xff0c;然后发送给上位机&#xff1b; 2.AD7606_Drive主要负责和芯片的交互部分 3.AD7606_ctrl控制模块的作…

Unity 插件 - Project窗口资源大小显示

Unity 插件 - Project窗口资源大小显示 &#x1f354;功能&#x1f32d;安装 &#x1f354;功能 &#x1f4a1;.显示Project Assets 和Packages下所有文件的大小&#xff08;右侧显示&#xff09; &#x1f4a1;.统计选中文件夹及其子文件夹下所有文件的大小并显示&#xff08…

HTB:Photobomb[WriteUP]

目录 连接至HTB服务器并启动靶机 使用nmap对靶机进行端口开放扫描 再次使用nmap对靶机开放端口进行脚本、服务扫描 使用ffuf进行简单的子域名扫描 使用浏览器直接访问该域名 选取一个照片进行下载&#xff0c;使用Yakit进行抓包 USER_FLAG&#xff1a;a9afd9220ae2b5731…

ssm教室信息管理系统+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码看文章最下面 需要定制看文章最下面 目 录 目 录 III 1 绪论 1 1.1 研究背景 1 1.2目的和意义 1 1.3 论文结构安排 2 2 相关技术 3 …

详解Java之Spring MVC篇二

目录 获取Cookie/Session 理解Cookie 理解Session Cookie和Session的区别 获取Cookie 获取Session 获取Header 获取User-Agent 获取Cookie/Session 理解Cookie HTTP协议自身是“无状态”协议&#xff0c;但是在实际开发中&#xff0c;我们很多时候是需要知道请求之间的…

量子计算及其在密码学中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 量子计算及其在密码学中的应用 引言 量子计算概述 定义与原理 发展…

当财政支持减弱时,国有企业如何实现降本增效?

当财政支持减弱时&#xff0c;国有企业如何实现降本增效&#xff1f; 随着市场环境的不断变化和上级市场化政策要求的不断推进&#xff0c;部分国有企业面临着双重压力&#xff0c;一方面&#xff0c;市场的快速变革要求企业不断创新、提升竞争力&#xff1b;另一方面&#xff…

引入 axios,根据 api 文档生成调用接口

起步 | Axios Docs 安装 axios npm install axios 生成 api 调用接口【可选】 https://github.com/ferdikoomen/openapi-typescript-codegen 安装 npm install openapi-typescript-codegen --save-dev 然后执行生成代码 # http://localhost:8805/api/user/v3/api-docs&a…

ElasticSearch的Python Client测试

一、Python环境准备 1、下载Python安装包并安装 https://www.python.org/ftp/python/3.13.0/python-3.13.0-amd64.exe 2、安装 SDK 参考ES官方文档: https://www.elastic.co/guide/en/elasticsearch/client/index.html python -m pip install elasticsearch一、Client 代…

在双显示器环境中利用Sunshine与Moonlight实现游戏串流的同时与电脑其他任务互不干扰

我和老婆经常会同时需要操作家里的电脑&#xff0c;在周末老婆有时要用电脑加班上网办公&#xff0c;而我想在难得的周末好好地Game一下&#xff08;在客厅用电视机或者平板串流&#xff09;&#xff0c;但是电脑只有一个&#xff0c;以往我一直都是把电脑让给老婆&#xff0c;…

【第六节】windows汇编开发工具-RadAsm与Masm

一、介绍RadAsm和Masm相关概念 1.1 什么是Win32Asm&#xff1f; Win32Asm是一种基于32位汇编语言的编程语言&#xff0c;专门用于在Windows操作系统下进行开发。Win32Asm的全称是“Windows下的32位汇编语言编程”&#xff0c;它使用微软的MASM&#xff08;Microsoft Macro Ass…

EHOME视频平台EasyCVR视频融合平台支持哪些摄像机接入?监控摄像头镜头的种类有哪些?

在现代安防监控领域&#xff0c;视频融合平台扮演着至关重要的角色&#xff0c;它们不仅能够整合不同品牌和型号的摄像机&#xff0c;还能提供稳定可靠的视频流传输和高效的视频管理功能。EasyCVR视频融合平台以其卓越的兼容性和灵活性&#xff0c;逐渐成为构建复杂监控网络的首…

从pg_depend和pg_class开始了解MogDB/openGauss/postgresql的系统元数据设计

前言 学习任何一种数据库&#xff0c;必须要了解它的数据字典&#xff0c;这样有利于了解数据库的结构、解读部分日志、定位一些问题。PG/OG系数据库的系统元数据遵从一个统一的设计规则&#xff0c;可以让初学者快速入门。本文以MogDB为例&#xff0c;剖析一下PG/OG系数据库的…

[译] APT分析报告:13.Trellix对Iran网络空间能力评估

这是作者新开的一个专栏&#xff0c;主要翻译国外知名安全厂商的技术报告和安全技术&#xff0c;了解它们的前沿技术&#xff0c;学习它们威胁溯源和恶意代码分析的方法&#xff0c;希望对您有所帮助。当然&#xff0c;由于作者英语有限&#xff0c;会借助LLM进行校验和润色&am…

vue2,vue3,uniapp,小程序实现前端url生成二维码

最近遇到一个项目&#xff0c;api返回url地址&#xff0c;前端通过地址生成二维码。 话不多说直接上代码&#xff0c;亲测有效&#xff0c;希望能帮助大家&#xff0c;同时如果有更好的方法希望大家能够分享 1、第一步&#xff0c;在项目的utils文件夹下面创建一个weapp-qrco…

Python的函数(补充浅拷贝和深拷贝)

一、定义 函数的定义&#xff1a;实现【特定功能】的代码块。 形参&#xff1a;函数定义时的参数&#xff0c;没有实际意义 实参&#xff1a;函数调用/使用时的参数&#xff0c;有实际意义 函数的作用&#xff1a; 简化代码提高代码重用性便于维护和修改提高代码的可扩展性…

FPGA学习笔记#4 Vitis HLS 入门的第一个工程

本笔记使用的Vitis HLS版本为2022.2&#xff0c;在windows11下运行&#xff0c;仿真part为xcku15p_CIV-ffva1156-2LV-e&#xff0c;这一篇终于没有再大量使用别人的内容&#xff0c;是我自己从头捋到尾的结果&#xff0c;不过之后的笔记还是要参照别人的教程就是了。 学习笔记&…

Linux中给普通账户一次性提权

我在以前文章中Linux常见指令大全&#xff08;必要知识点&#xff09;-CSDN博客 写过sudo的概念与用法。其实本质就是提权用的但是在某些场景下就算提权了也不能使用。 例如&#xff1a;打开主工作目录 他不相信你这个用户&#xff0c;虽然你是erman 解决方法 使用root账号打开…