vue 图片转pdf

尝试了集中图片转pdf的方式,
(1)最终较为优秀的一种是使用jspdf将图片转为pdf,支持JPG/JPEG/PNG/BMP/TIF/TIFF图片格式转换,详见我的另一篇文章:
https://blog.csdn.net/Ann_52547/article/details/132214909?spm=1001.2014.3001.5502

(2)使用print-js插件,去看看

(3)pdfMake图片转pdf,支持JPG/JPEG/PNG图片格式转换,去看看

(4)html2canvas,转出来的图片模糊,需要处理啊,我没处理,去看看

(2)print-js图片转pdf

npm安装print-js依赖

main.js:

import print from 'print-js'

使用:

printJS({// blob链接 数组printable: ['blob:http//.....'],// 打印类型 目前为图片样式 可以根据上面的网址进行修改 type: 'pdf',// 二维码样式 可以自己进行修改imageStyle: 'margin:0px; padding:0px; width:40%; height:40%; display: block; margin: 0 auto; padding-top:12%'// 也可以设置以下参数 继承所有css样式 没试过image的 html的效果不错// targetStyles:['*']})

(3)pdfMake图片转pdf

安装pdfMake依赖

async convertToPDF(blob, id) {let this_ = thislet base64Data = await this.readFile(blob);const docDefinition = {content: [{ image: base64Data,  fit: [190, 277], alignment: 'center' } //width: 	400,]}const pdfDocGenerator = pdfMake.createPdf(docDefinition)pdfDocGenerator.getBlob(pdfBlob => {console.log("这是pdf的blob格式-----"pdfBlob);// 可以在这里使用blob,比如将其转换为Blob URLlet url = window.URL.createObjectURL(new Blob([pdfBlob], { type: 'application/pdf' }))});
},//blob转base64
readFile(file) {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = function () {const contents = reader.result;resolve(contents);};reader.onerror = function (event) {reject(event.target.error);};reader.readAsDataURL(file);});
},

其他一些转化方法

//ArrayBuffer转换为Base64
arrayBufferToBase64(arrayBuffer) {const uint8Array = new Uint8Array(arrayBuffer);let binaryString = '';for (let i = 0; i < uint8Array.length; i++) {binaryString += String.fromCharCode(uint8Array[i]);}return btoa(binaryString);
},

(4)html2canvas图片转pdf

安装依赖

<div v-for="(item, index) in list" :key="index"><img :id="'imageContainer'+item.id" :src="item.imgurl" alt="" />
</div>
async imgToPdf(imgUrl, id) {// 将图片渲染为Canvas//因为img标签是循环展示图片的,通过id判断是哪个img标签const canvas = await html2canvas(window.document.getElementById('imageContainer'+id))// 获取Canvas的DataURLconst imageURL = canvas.toDataURL('image/png')//const imageURL = canvas.toDataURL(imgUrl)// 创建PDF实例并设置纸张大小const pdf = new jsPDF('p', 'px', 'a4')// 计算图片在PDF中的宽度和高度const pdfWidth = pdf.internal.pageSize.getWidth()const pdfHeight = (canvas.height * pdfWidth) / canvas.width// 将图片添加到PDF中pdf.addImage(imageURL, 'JPEG', 0, 0, pdfWidth, pdfHeight)pdf.save()const blob = new Blob([pdf], { type: 'application/PDF' })console.log("生成的pdf的blob文件---",blob)},

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

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

相关文章

MybatisPlus查询结果返回值为null

1、问题描述 返回值为null&#xff0c;程序不报错&#xff0c;但是条数好像是正确的。我出现问题的代码如下&#xff1a; 1、自定义类StudentMapper继承了BaseMapper接口 public interface StudentMapper extends BaseMapper<Student> { } 2、使用StudentMapper中的s…

centos 定时脚本检测tomcat是否启动,未启动情况下重新启动

编写脚本 tomcatMonitor.sh #!/bin/sh. /etc/profile . ~/.bash_profile#首先用ps -ef | grep tomcat 获得了tomcat进程信息&#xff0c;这样出来的结果中会包含grep本身&#xff0c; #因此通过 | grep -v grep 来排除grep本身&#xff0c;然后通过 awk {print $2}来打印出要…

Struts2一次请求参数问题的记录

最近&#xff0c;一次前端正常请求&#xff0c;但后台出现请求参数值的变化&#xff0c;导致报错&#xff0c;问题如下&#xff1a; 从入参request中查看请求参数&#xff0c;是一个Json字符串&#xff0c;其中有个description的键值对&#xff1b; 但是&#xff0c;接下来调用…

【需求输出】用户故事方法

文章目录 1、初识用户故事2、用户故事是描述需求的最好方式3、创建用户故事4、用户故事的分层管理5、编写用户故事的工具 1、初识用户故事 2、用户故事是描述需求的最好方式 3、创建用户故事 4、用户故事的分层管理 5、编写用户故事的工具

软件测试基础之软件缺陷处理

一、什么是缺陷 不满足用户确定需求、影响软件功能实现的问题、故障 缺陷就是人们通常所说的bug。 ex.一下哪一种选项不属于软件缺陷___。 A.软件没有实现产品规格说明所要求的功能 B.软件中出现了产品规格说明不应该出现的功能 C.软件实现了产品规格说明没有提到的功能 D.软…

Python实现透明隧道爬虫ip:不影响现有网络结构

作为一名专业爬虫程序员&#xff0c;我们常常需要使用隧道代理来保护个人隐私和访问互联网资源。本文将分享如何使用Python实现透明隧道代理&#xff0c;以便在保护隐私的同时不影响现有网络结构。通过实际操作示例和专业的解析&#xff0c;我们将带您深入了解透明隧道代理的工…

TiDB 应急运维脚本,更加方便的管理TiDB集群

TiDB 应急运维脚本&#xff0c;更加方便的管理TiDB集群 使用方法 使用方法&#xff1a;[tidblocalhost ~]$ which tiup ~/.tiup/bin/tiup编辑脚本&#xff0c;MYSQL_PASSWD 和 PORT 根据实际替换 [tidblocalhost ~]$ vi ~/.tiup/bin/ti#version 1.1 #author guanguanglei ##…

Base64编码-算法特别的理解

Base64 在DES加密和AES加密的过程中&#xff0c;加密的编码会出现负数&#xff0c;在ascii码表中找不到对应的字符&#xff0c;就会出现乱码。为了解决乱码的问题&#xff0c;一般结合base64使用 所谓Base64&#xff0c;即是说在编码过程中使用了64种字符&#xff1a;大写A到Z、…

【GO】配置环境使加速下载 go 模块

问题 在使用 go 语言编译时&#xff0c;需要安装一些包&#xff0c;这些包在使用 go build 或 go install 时&#xff0c;go 自己去下载&#xff0c;但是会有网络不通导致无法下载的问题 解决 配置 go 的环境变量 go env -w GOPROXYhttps://goproxy.io,direct

chartGPT生成:python中连接函数的使用

在Python中&#xff0c;连接函数用于将多个字符串拼接在一起。常见的连接函数有join和操作符。 join函数&#xff1a; strings ["Hello", "world", "!"] result " ".join(strings) print(result) # 输出&#xff1a;Hello world …

Azure资源命名和标记决策指南

参考 azure创建虚拟机在虚拟机中选择编辑标签&#xff0c;并添加标记&#xff0c;点击应用 3.到主页中转到所有资源 4. 添加筛选器并应用 5.查看结果&#xff0c;筛选根据给服务器定义的标签筛选出结果。 参考链接: https://learn.microsoft.com/zh-cn/azure/cloud-adoption…

在Java中操作Redis(详细-->从环境配置到代码实现)

在Java中操作Redis 文章目录 在Java中操作Redis1、介绍2、Jedis3、Spring Data Redis3.1、对String的操作3.2、对哈希类型数据的操作3.3、对list的操作3.4、对set类型的操作3.5、对 ZSet类型的数据&#xff08;有序集合&#xff09;3.6、通用类型的操作 1、介绍 Redis 的Java客…

基于Echarts的数据可视化大屏

本项目学习于b站up主&#xff08;视频链接&#xff09; up主分享的资料&#xff0c;gitee仓库&#xff1a; 其中有笔记&#xff0c;笔记链接 项目总结 项目主要分为前端页面的布局和Echarts图表的嵌入&#xff0c;页面主要就是css较为繁琐&#xff0c;图表毕竟官网有模板&…

Python 2.x 中如何使用pandas模块进行数据分析

Python 2.x 中如何使用pandas模块进行数据分析 概述: 在数据分析和数据处理过程中&#xff0c;pandas是一个非常强大且常用的Python库。它提供了数据结构和数据分析工具&#xff0c;可以实现快速高效的数据处理和分析。本文将介绍如何在Python 2.x中使用pandas进行数据分析&am…

【深度学习_TensorFlow】自定义层实现cifar10

写在前面 尽管 tf.keras 提供了很多的常用网络层类&#xff0c;但深度学习可以使用的网络层远远不止这些。科研工作者一般是自行实现了较为新颖的网络层&#xff0c;经过大量实验验证有效后&#xff0c;深度学习框架才会跟进&#xff0c;内置对这些网络层的支持。因此掌握自定…

学习笔记整理-面向对象-01-认识对象

一、认识对象 1. 对象 对象(object)是键值对的集合&#xff0c;表示属性和值的映射关系。 对象的语法 k和v之间用冒号分割&#xff0c;每组k:v之间用逗号分割&#xff0c;最后一个k:v对后可以不书写逗号。 属性是否加引号 如果对象的属性键名不符合命名规范&#xff0c;则这…

数组slice、splice字符串substr、split

一、定义 这篇文章主要对数组操作的两种方法进行介绍和使用&#xff0c;包括&#xff1a;slice、splice。对字符串操作的两种方法进行介绍和使用&#xff0c;包括&#xff1a;substr、split (一)、数组 slice:可以操作的数据类型有&#xff1a;数组字符串 splice:数组 操作数组…

一个基础但全面的Vue的表单范例,很基础,但是很容易,也很全面。

下面这个案例&#xff0c;路人朋友们可以直接粘贴到html文件类型中运行&#xff0c;注意引入Vuejs的路径即可&#xff0c;不会改的可以参考我第一篇Vue入门&#xff0c;同时建议同志们手打&#xff0c;真的前端都不能熟能生巧&#xff0c;既不要编程了&#xff0c; 可以详细看注…

计算机网络-物理层(一)物理层的概念与传输媒体

计算机网络-物理层&#xff08;一&#xff09;物理层的概念与传输媒体 物理层相关概念 物理层的作用用来解决在各种传输媒体上传输比特0和1的问题&#xff0c;进而为数据链路层提供透明(看不见)传输比特流的服务物理层为数据链路层屏蔽了各种传输媒体的差异&#xff0c;使数据…

最新Kali Linux安装教程:从零开始打造网络安全之旅

Kali Linux&#xff0c;全称为Kali Linux Distribution&#xff0c;是一个操作系统(2013-03-13诞生)&#xff0c;是一款基于Debian的Linux发行版&#xff0c;基于包含了约600个安全工具&#xff0c;省去了繁琐的安装、编译、配置、更新步骤&#xff0c;为所有工具运行提供了一个…