首页 > 其他分享 >vue生成图片打印

vue生成图片打印

时间:2024-09-23 19:22:29浏览次数:3  
标签:src canvas vue const img 打印 生成 html2canvas document

 <div id="content-to-convert" style="width: 772px;color: #000000;">
 生成图片内容
</div>

html2canvas(document.getElementById('content-to-convert'), { scale: 2}).then(canvas => {
       // html2canvas(document.getElementById('content-to-convert')).then(canvas => {
         const img = new Image();
         img.src = canvas.toDataURL();
         this.imgs = img.src
         // 跳转窗口
         //const previewWindow = window.open('', '_blank');
         //previewWindow.document.write(`<img src="${img.src}" />`);
         // this.pr(this.imgs)
         const style = `@page { size: auto; margin: 0; } img { width: 500px; }`; // 设置图片宽度为 500px,你可以根据实际需求调整这个值
         printJS({
            printable: img.src,
            type: 'image',
            header: '',
            targetStyles: [],
            scanStyles: false,
            style
          });
       });

标签:src,canvas,vue,const,img,打印,生成,html2canvas,document
From: https://blog.csdn.net/qq_34631220/article/details/142464291

相关文章

  • 【开题报告】基于django+vue旅游景点预约系统(论文+源码) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着旅游业的蓬勃发展,人们对旅游体验的需求日益多样化与个性化。传统的旅游预约方式往往存在信息不对称、预约流程繁琐、效率低下等问题,已......
  • springboot+vue自驾游信息管理系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着生活水平的提高和私家车的普及,自驾游已成为现代人追求自由、个性化旅行方式的首选。然而,自驾游过程中涉及的信息繁多且复杂,包括路线规划、景点选择、美食探索、住宿预订等多个方面,传统的手工查询和记录方式已难以满足游客高效、便......
  • springboot+vue智慧外贸平台7l0u0【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着全球经济的深度融合与信息技术的飞速发展,外贸行业正经历着前所未有的变革。传统外贸模式受限于信息不对称、流程繁琐、效率低下等问题,难以满足日益增长的国际贸易需求。在此背景下,智慧外贸平台应运而生,旨在通过集成大数据、云计算......
  • springboot+vue中药实验管理系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着中医药事业的蓬勃发展,中药实验作为中医药教育与科研的重要组成部分,其管理水平直接影响着教学质量与科研成果的转化效率。然而,传统的中药实验管理模式多依赖于人工记录与纸质文档,存在信息更新不及时、资源共享难度大、管理流程繁琐......
  • springboot+vue羽毛球场管理系统【开题+程序+论文】
    系统程序文件列表开题报告内容研究背景随着全民健身热潮的兴起,羽毛球作为一项广受欢迎的运动项目,其场地需求日益增长。然而,传统的人工管理模式在面对大量用户预约、场地分配、储物柜管理以及商品销售等复杂需求时,显得力不从心。这不仅影响了用户体验,也增加了管理成本。因此......
  • C# mvc如何调用浏览器直接打印
    直接打印到打印机是指在C#MVC(Model-View-Controller)开发框架中,通过编程方式将数据直接发送到打印机进行打印的操作。在C#MVC中,可以使用System.Drawing.Printing命名空间中的PrintDocument类来实现直接打印到打印机的功能1)绝对路径方式///<summary>///打......
  • (一)Bluebell用户表结构设计及用户ID生成(雪花算法)
    一、用户表结构在mysql数据库中创建user表DROPTABLEIFEXISTS`user`;CREATETABLE`user`(`id`bigint(20)NOTNULLAUTO_INCREMENT,`user_id`bigint(20)NOTNULL,`username`varchar(64)COLLATEutf8mb4_general_ciNOTNULL,`password`varchar(64)COLLATEutf8......
  • springboot基于Java的高校学生食堂系统(源码+vue+部署文档+前后端分离等)
    收藏关注不迷路!!......
  • vue3.0使用v-md-editor预览markdown文件
    1.安装依赖npmi@kangc/v-md-editor-S2.在main.js文件中引用注册组件import{createApp}from'vue';//预览组件以及样式importVMdPreviewfrom'@kangc/v-md-editor/lib/preview';import'@kangc/v-md-editor/lib/style/preview.css';importgithubThe......
  • 【艾思科蓝】前端框架巅峰对决:React、Vue与Angular的全面解析与实战指南
    【JPCS独立出版】​第三届能源与动力工程国际学术会议(EPE2024)_艾思科蓝_学术一站式服务平台更多学术会议请看:https://ais.cn/u/nuyAF3 引言在快速发展的前端技术领域,选择合适的框架或库对于项目的成功至关重要。React、Vue和Angular作为当前最流行的三大前端框架/库,各自......