原生JS调用打印预览页面并实现打印文件流图片（亲测有效）

最新推荐文章于 2024-04-29 14:23:05 发布

风泽木

最新推荐文章于 2024-04-29 14:23:05 发布

阅读量2.7k

点赞数 2

分类专栏：知识点整理文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_41317414/article/details/112303746

版权

知识点整理专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印，那么如何才能够在打印预览页面中显示图片呢？希望看完这篇文章对您有所帮助！

1. 原生JS调用打印预览页面
2. 在打印预览页面加载图片

使用JS调用打印预览页面

PrintView: function (callback, obj, obj1, tmpBatchId) {
  ComFunJS.winconfirm("确认打印吗？",function () {
     var str = '<!DOCTYPE html>';
     str += '<html><title>请休假申请单</title>';
     str += '<head>';
     str += '<meta charset="utf-8">';
     str += '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">';
     str += '</head>';
     str += '<body>';
     str += document.getElementById("PrintId").innerHTML;
     str += '</body>';
     str += '</html>';
     var new_win = window.open("about:blank", "", "");
    setTimeout(Printwait(), 100000);
     new_win.document.body.innerHTML = str;
     setTimeout(function () {//解决谷歌打印预览页面第一加载时不显示图片问题
     new_win.focus();
     new_win.print()
	 }, 600)
  },function () { });
},

在打印预览页面加载图片

getlist:function(){
 var url = window.location.href;
 var arr = url.split("/V2");
 tempmodel.apiUrl=arr[0];//截取当前浏览器url地址前缀
 if (strId && strId != "0") {
 	tempmodel.printID = strId
    $.getJSON(UrlServer + '/API/VIEWAPI.ashx?Action=GWJD_GETPRINT', { P1: strId }, function (resultData) {
       if (resultData.ErrorMsg == "") {
          var list = resultData.Result;
          //打印预览页面 需拼接完整的可访问的图片路径
          list.imgUrl = tempmodel.apiUrl+"/V2/Base/DownFile.aspx?type=app&fileId=" + list.Files;
          tempmodel.modelData = list;
          tempmodel.SPLIST = resultData.Result2
          var SPLIST = resultData.Result2;
          if (SPLIST.length>0&&SPLIST[2]) {
          	tempmodel.hospitalLeaders = SPLIST[2] 
          }
          setTimeout(" tempmodel.PrintView()", 1000);
       }
	})
  }
}

写在最后

如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏，毕竟原创不易；如果您觉得文章有什么地方写得不对或者需要改进的地方，欢迎通过评论私聊博主！

风泽木

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生JS调用打印预览页面并实现打印文件流图片（亲测有效）

在工作中我们经常会遇到使用浏览器预览打印页面并实现文件打印，那么如何才能够在打印预览页面中显示图片呢？希望看完这篇文章对您有所帮助！1. 原生JS调用打印预览页面2. 在打印预览页面加载图片使用JS调用打印预览页面PrintView: function (callback, obj, obj1, tmpBatchId) { ComFunJS.winconfirm("确认打印吗？", function () {
复制链接

扫一扫

专栏目录