vue3项目ts文件引入LodopFuncs.js打印控件

最新推荐文章于 2024-05-30 16:57:19 发布
最新推荐文章于 2024-05-30 16:57:19 发布
阅读量1.4k 收藏 2
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60459392/article/details/125261768
版权 
//==本JS是加载Lodop插件或Web打印服务CLodop/Lodop7的综合示例，可直接使用，建议理解后融入自己程序==

var CreatedOKLodopObject, CLodopIsLocal, CLodopJsState;

//==判断是否需要CLodop(那些不支持插件的浏览器):==
function needCLodop() {
    try {
        var ua = navigator.userAgent;
        if (ua.match(/Windows\sPhone/i)) return true;
        if (ua.match(/iPhone|iPod|iPad/i)) return true;
        if (ua.match(/Android/i)) return true;
        if (ua.match(/Edge\D?\d+/i)) return true;

        var verTrident = ua.match(/Trident\D?\d+/i);
        var verIE = ua.match(/MSIE\D?\d+/i);
        var verOPR = ua.match(/OPR\D?\d+/i);
        var verFF = ua.match(/Firefox\D?\d+/i);
        var x64 = ua.match(/x64/i);
        if ((!verTrident) && (!verIE) && (x64)) return true;
        else if (verFF) {
            verFF = verFF[0].match(/\d+/);
            if ((verFF[0] >= 41) || (x64)) return true;
        } else if (verOPR) {
            verOPR = verOPR[0].match(/\d+/);
            if (verOPR[0] >= 32) return true;
        } else if ((!verTrident) && (!verIE)) {
            var verChrome = ua.match(/Chrome\D?\d+/i);
            if (verChrome) {
                verChrome = verChrome[0].match(/\d+/);
                if (verChrome[0] >= 41) return true;
            }
        }
        return false;
    } catch (err) {
        return true;
    }
}

//加载CLodop时用双端口(http是8000/18000,而https是8443/8444)以防其中某端口被占,
//主JS文件名“CLodopfuncs.js”是固定名称，其内容是动态的，与其链接的打印环境有关:
function loadCLodop() {
    if (CLodopJsState == "loading" || CLodopJsState == "complete") return;
    CLodopJsState = "loading";
    var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
    var JS1 = document.createElement("script");
    var JS2 = document.createElement("script");

    if (window.location.protocol == 'https:') {
        JS1.src = "https://localhost.lodop.net:8443/CLodopfuncs.js";
        JS2.src = "https://localhost.lodop.net:8444/CLodopfuncs.js";
    } else {
        JS1.src = "http://localhost:8000/CLodopfuncs.js";
        JS2.src = "http://localhost:18000/CLodopfuncs.js";
    }
    JS1.onload = JS2.onload = function () { CLodopJsState = "complete"; }
    JS1.onerror = JS2.onerror = function (evt) { CLodopJsState = "complete"; }
    head.insertBefore(JS1, head.firstChild);
    head.insertBefore(JS2, head.firstChild);
    CLodopIsLocal = !!((JS1.src + JS2.src).match(/\/\/localho|\/\/127.0.0./i));
}

if (needCLodop()) { loadCLodop(); }//开始加载

//==获取LODOP对象主过程,判断是否安装、需否升级:==
export function getLodop(oOBJECT, oEMBED) {
    var strFontTag = "<br><font color='#FF00FF'>打印控件";
    var strLodopInstall = strFontTag + "未安装!点击这里<a href='install_lodop32.exe' target='_self'>执行安装</a>";
    var strLodopUpdate = strFontTag + "需要升级!点击这里<a href='install_lodop32.exe' target='_self'>执行升级</a>";
    var strLodop64Install = strFontTag + "未安装!点击这里<a href='install_lodop64.exe' target='_self'>执行安装</a>";
    var strLodop64Update = strFontTag + "需要升级!点击这里<a href='install_lodop64.exe' target='_self'>执行升级</a>";
    var strCLodopInstallA = "<br><font color='#FF00FF'>Web打印服务CLodop未安装启动，点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>下载执行安装</a>";
    var strCLodopInstallB = "<br>（若此前已安装过，可<a href='CLodop.protocol:setup' target='_self'>点这里直接再次启动</a>）";
    var strCLodopUpdate = "<br><font color='#FF00FF'>Web打印服务CLodop需升级!点击这里<a href='CLodop_Setup_for_Win32NT.exe' target='_self'>执行升级</a>";
    var strLodop7FontTag = "<br><font color='#FF00FF'>Web打印服务Lodop7";
    var strLodop7HrefX86 = "点击这里<a href='Lodop7_Linux_X86_64.tar.gz' target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
    var strLodop7HrefARM = "点击这里<a href='Lodop7_Linux_ARM64.tar.gz'  target='_self'>下载安装</a>(下载后解压，点击lodop文件开始执行)";
    var strLodop7Install_X86 = strLodop7FontTag + "未安装启动，" + strLodop7HrefX86;
    var strLodop7Install_ARM = strLodop7FontTag + "未安装启动，" + strLodop7HrefARM;
    var strLodop7Update_X86 = strLodop7FontTag + "需升级，" + strLodop7HrefX86;
    var strLodop7Update_ARM = strLodop7FontTag + "需升级，" + strLodop7HrefARM;
    var strInstallOK = "，成功后请刷新本页面或重启浏览器。</font>";
    var LODOP;
    try {
        var isWinIE = (/MSIE/i.test(navigator.userAgent)) || (/Trident/i.test(navigator.userAgent));
        var isWinIE64 = isWinIE && (/x64/i.test(navigator.userAgent));
        var isLinuxX86 = (/Linux/i.test(navigator.platform)) && (/x86/i.test(navigator.platform));
        var isLinuxARM = (/Linux/i.test(navigator.platform)) && (/aarch/i.test(navigator.platform));

        if (needCLodop() || isLinuxX86 || isLinuxARM) {
            try {
                LODOP = getCLodop();
            } catch (err) { }
            if (!LODOP && CLodopJsState !== "complete") {
                if (CLodopJsState == "loading") alert("网页还没下载完毕，请稍等一下再操作."); else alert("未曾加载Lodop主JS文件，请先调用loadCLodop过程.");
                return;
            }
            var strAlertMessage;
            if (!LODOP) {
                if (isLinuxX86) strAlertMessage = strLodop7Install_X86; else
                    if (isLinuxARM) strAlertMessage = strLodop7Install_ARM; else
                        strAlertMessage = strCLodopInstallA + (CLodopIsLocal ? strCLodopInstallB : "");
                document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
                return;
            } else {
                if (isLinuxX86 && LODOP.CVERSION < "7.0.4.3") strAlertMessage = strLodop7Update_X86; else
                    if (isLinuxARM && LODOP.CVERSION < "7.0.4.3") strAlertMessage = strLodop7Update_ARM; else
                        if (CLODOP.CVERSION < "4.1.6.1") strAlertMessage = strCLodopUpdate;

                if (strAlertMessage) document.body.innerHTML = strAlertMessage + strInstallOK + document.body.innerHTML;
            }
        } else { //==如果页面有Lodop插件就直接使用,否则新建:==
            if (oOBJECT || oEMBED) {
                if (isWinIE)
                    LODOP = oOBJECT;
                else
                    LODOP = oEMBED;
            } else if (!CreatedOKLodopObject) {
                LODOP = document.createElement("object");
                LODOP.setAttribute("width", 0);
                LODOP.setAttribute("height", 0);
                LODOP.setAttribute("style", "position:absolute;left:0px;top:-100px;width:0px;height:0px;");
                if (isWinIE)
                    LODOP.setAttribute("classid", "clsid:2105C259-1E0C-4534-8141-A753534CB4CA");
                else
                    LODOP.setAttribute("type", "application/x-print-lodop");
                document.documentElement.appendChild(LODOP);
                CreatedOKLodopObject = LODOP;
            } else
                LODOP = CreatedOKLodopObject;
            //==Lodop插件未安装时提示下载地址:==
            if ((!LODOP) || (!LODOP.VERSION)) {
                document.body.innerHTML = (isWinIE64 ? strLodop64Install : strLodopInstall) + strInstallOK + document.body.innerHTML;
                return LODOP;
            }
            if (LODOP.VERSION < "6.2.2.6") {
                document.body.innerHTML = (isWinIE64 ? strLodop64Update : strLodopUpdate) + strInstallOK + document.body.innerHTML;
            }
        }
        //===如下空白位置适合调用统一功能(如注册语句、语言选择等):=======================


        //===============================================================================
        return LODOP;
    } catch (err) {
        alert("getLodop出错:" + err);
    }
}

ts  文件进入

// @ts-nocheck
import {getLodop} from '@/utils/LodopFuncs.js'

IT全栈视野
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
LodopFuncs.js 和打印工具
11-01
里面有各种打印的dome和方法。js 和控件都有 直接copy就可以用了
CLodopfuncs.js
11-20
CLodop驱动依赖
vue3.2实现自动打印
weixin_61769998的博客
05-24 177
vue3.2使用Lodop 实现自动打印
Vue3+hooks快速接入Lodop打印插件
Bruce__taotao的博客
12-15 1930
上面文章《Vue快速接入菜鸟打印组件》讲了vue3如何快速集成菜鸟打印组件，这篇讲讲vue3如何集成lodop组件。在项目的hooks 文件夹下创建一个hook。根据自己的项目，按实际情况命名。这里是 useLodop.ts// 引入上一步骤创建的lodopfuns})try {} else {rawRow: {}) => {if (!LODOP) {return ElMessage.warning('请安装/启动Lodop 打印插件')// 根据打印的类型，获取设置的打印机字符串。
vue3使用vue3-print-nb打印；vue3直接触发打印窗口
最新发布
i_am_a_div的博客
05-30 1351
vue3-print-nb 打印页面；vue页直接打印；vue直接触发打印；vue直接唤起打印弹窗
Lodopfuncs.js（打印插件）使用小记-springboot
热门推荐
lan_学习分享
08-21 2万+
这两天研究这打印的js插件，html上图：   下载地址：http://www.lodop.net/download.html 下载好后，里面比较重要的就是这几个文件，因为他需要一些插件的支持，所以exe有必要的情况下最好放在你网页可以下载的地方，然后修改其js的引用路径，这样当客户没有安装exe的时候，可以直接在页面上下载exe来安装，下载后的html估计都是些打印样板，具体不深究，这...
vue 使用c-lodop插件实现循环同一页预览
Chihirozy的博客
11-28 521
1.将LodopFuncs.js复制到项目中。2. 打印页面引入LodopFuncs.js。前提：前往lodop官网，下载插件，
vue 使用c-lodop插件实现循环打印 调整打印样式
sinat_41273766的博客
09-04 1198
vue 使用c-lodop插件实现循环打印 可调整打印样式
vue.js 下载，引入vue.js 本地开发
05-18
以上就是Vue.js的基本介绍和引入方式，结合标签中的"javascript"和"ecmascript"，Vue.js是基于ECMAScript（特别是ES5和部分ES6特性）构建的，因此理解JavaScript基础和现代JavaScript特性对于深入学习Vue.js至关重要...
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue-cli3 js项目中引入ts混用typeScript1
08-08
$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo:
Lodop的LodopFuncs.js
11-16
Lodop打印需要的LodopFuncs.js已测试可使用 Lodop是什么？ 有人说她是Web打印控件，因为她能打印、在浏览器中以插件的形式出现，用简单一行语句就把整个网页打印出来； 有人说她是打印编程接口，因为她介于浏览器和打印设备之间，是个通道和桥梁，几乎能想到的打印控制事项都能做到； 有人说她是JavaScript的扩展，因为她所有功能就那么几个语句，和JS语法一样，一看就明白个究竟； 有人说她是报表打印工具，因为那个add_print_table语句把报表统计的那点事弄了个明明白白； 有人说她是条码打印工具，因为用了她再也不用后台生成条码图片了，前端一行指令就动态输出清晰准确的条码，一维二维都行； 有人说她是图表打印工具，因为用她能输出几乎能想象的任何图表，虽然没那么豪华，但什么饼图、折线图、柱图甚至复合图等等都不在话下； 有人说她是个小玩意，因为她体积太小了，才2M多，她所包含的其中任何一个对照工具都是她的好几倍（例如条码打印控件、图表控件等）； 有人说她是套打教案，因为以Lodop+JS实现套打这种模式，在网上已被吵吵为教科书般的解决方案； 有人说她是Web打印控件的“终结者”，因为接触“她”后再不想别的“她”； 有人说她就是一个Web编程小工具，因为有了她，在BS下的打印终于像cs下那种随意而高效了； 但我们说，她是全国1000多家软件公司的智慧结晶，诞生7年了，几乎每个功能细节都蕴藏着无数开发者的期待和汗水； 她就是Lodop，没有别的名称，她是web开发的必选伴侣...
LodopFuncs.js
04-21
Lodop,Lodop打印控件,WEB打印,C-Lodop,CLodop,lodop控件,云打印,手机打印,免费,AO打印... Lodop技术手册下载 精彩,一下就有! 下载 2017-09-04 C-Lodop技术手册...
vue项目引入ts步骤(小结)
10-16
在Vue项目中引入TypeScript，主要是为了利用其强大的类型检查和静态分析能力，提高代码的可维护性和稳定性。以下是详细的步骤： 1. **安装TypeScript和ts-loader** 首先，你需要通过npm或cnpm安装TypeScript和ts-...
从`.vue`文件生成`d.ts`。-JavaScript开发
05-26
从`.vue`文件生成`d.ts`。 :yellow_heart:通过在GitHub上赞助他，可以帮助他成为一名全职开源维护者。 vue-dts-gen从.vue文件生成d.ts。 全局安装：npm i -g vue-dts-gen或本地安装：npm i -D vue-dts-gen用法输出...
LODOP使用
weixin_58405115的博客
01-02 500
【代码】LODOP使用。
解决Lodop 8443端口找不到CLodopfuncs.js文件问题
清晨-阳光的博客
10-13 6058
解决Lodop打印时，8443端口加载不到CLodopfuncs.js文件的问题。(暂时解决)
出现 net::ERR_CONNECTION_REFUSED 问题，Vue处理方式
weixin_48449171的博客
07-28 3563
【代码】出现 net::ERR_CONNECTION_REFUSED 问题，Vue处理方式。
vue3项目中webpack.config.ts文件配置
05-13
在 Vue3 项目中，我们通常使用 Vue CLI 来创建和配置项目，而不是手动修改 webpack 配置文件。Vue CLI 会自动生成一份 webpack 配置文件，我们可以通过 `vue.config.js` 文件来修改这份配置。 如果你还是想手动修改 webpack 配置文件，那么可以按照以下步骤进行操作： 1. 安装 `@vue/cli-service` 和 `@vue/compiler-sfc`： ``` npm install --save-dev @vue/cli-service @vue/compiler-sfc ``` 2. 在项目根目录下创建一个 `webpack.config.ts` 文件，并添加以下内容： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue() ], resolve: { alias: { 'vue': '@vue/runtime-dom' } } }) ``` 上面的配置中，我们使用了 `vite` 的 `defineConfig` 函数来定义配置，引入了 `@vitejs/plugin-vue` 插件以支持 Vue 单文件组件的编译和解析，同时通过 `alias` 配置将 `vue` 模块指向了 `@vue/runtime-dom`。 3. 修改 `package.json` 文件中的 `scripts` 字段，添加以下内容： ```json "scripts": { "serve": "vue-cli-service serve --config webpack.config.ts", "build": "vue-cli-service build --config webpack.config.ts" } ``` 上面的配置中，我们使用了 `vue-cli-service` 命令来启动开发服务器和构建项目，并通过 `--config` 选项指定了使用我们自己定义的 webpack 配置文件。 现在你就可以通过 `npm run serve` 启动开发服务器，或者通过 `npm run build` 构建项目了。请注意，手动修改 webpack 配置文件可能会导致一些不兼容的问题，建议在修改之前备份原有的配置文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值