V君的博客

使用 Web API 下载 PDF 遇到的坑

作者：V君 发布于：2022-4-28 20:13 Thursday 分类：挖坑经验

TL;DR：

• 将 XHR 的 responseType 设置为 "arraybuffer"
• 如果使用 axios 则要在参数对象加 responseType:'arraybuffer'
• 获取响应之后用 response 创建 Blob 然后交给 ObjectURL（别忘记type）
• 将创建好的 ObjectURL 交给 IFrame 直接呈现，或者交给 A 标签实现下载

听我扯扯：

前后端分离的项目中遇到需要预览（下载）PDF 的需求，而且用了基于请求头而非 Cookie 的验证方式，因此无法走 IFrame 直接把 API 的 URL 送进去。绕了一圈远路尝试解决验证问题，无果。

回过头想起可以让 XHR 下二进制数据的做法，咕狗“XHR PDF”找到爆栈上面的《XMLHttpRequest to open PDF in browser》。（其实这时候已经看到有回答在 XHR 指定 type 为 'arraybuffer' 了）然鹅把 BLOB 链接放进 IFrame 之后，文字和图片全都不见了，只剩下几页空白页（页数正确）。已经确认过后端输出的 PDF 正常，而通过 A 标签的 HRef 放入 BLOB 连接下载的文件大小跟服务器响应的不一样，体积大约翻了一倍。

在浏览器调试脚本发现 XHR 的 reponse 是字符串，在控制台用 typeof 确认过眼神，这时候只能去咕狗了，“xhr binary data”，第一条返回 MDN 上的《发送和接收二进制数据 - Web API 接口参考》，里面提到了 XHR 的 responseType 属性，设置成 "arraybuffer" 才能避免浏览器把输出内容错误地当成文本来解析。

至此问题完美解决，可喜可贺！这个月差点找不到值得发表的内容 _(:з)∠)_

标签: javascript Web技术 前端工程

评论(0) 引用(0) 浏览(46)

通过WebSocket隧道，尝试将ASP.NET网站空间当作VPS来使用

作者：V君 发布于：2021-1-17 11:50 Sunday 分类：折腾手记

先上 PoC源代码 再开始扯，这次不是着重解决某个问题，而是尝试确定某种可能性。

以前使用过 C9.io 提供的免费在线开发环境来搞各种事情，包括正常上网，无非是利用 Web Sockets 建立隧道，然后配合客户端连接到在上面运行各种应用程序。
现在C9已经被收购且停止免费了，那就公开来说吧w

这次也不例外，只不过花了点钱搞了个支持 ASP.NET 4.5+ 的网站空间，然后在上面搞类似的事情。

基础设施 -- WebSocket 转 TCP 模块

首先要使用 WebSocket 来建立一条隧道，要求网站空间支持且启用 WebSocket，不然没法整。这里有个未经优化，但还能凑合着用的例子，只要挂在 HttpModule 中 HttpApplication 的 PostMapRequestHandler 事件，填好参数就能吃。

折腾1 -- SSH 终端

略去寻找绿色 SSH 服务端的辛酸过程，时间直接转到发现 FxSsh 这个纯托管实现的服务端。这里要分成两个部分来扯，分别是使用基于 ConPTY 的 MiniTerm 和兼容低版本 Windows 的简单兼容实现。由于 FxSsh 主要实现的是 SSH 协议通道，服务端的终端并没有适配，尽管源代码中带了个名为 MiniTerm 的 DEMO 来适配到较新系统的 ConPTY。

第一部分：基于 MiniTerm 的实现。原版的 MiniTerm 虽然导入了 ResizePseudoConsole 这个 API 但并没有使用。而且由于 NuGet 上的 FxSsh 不是最新版，没有窗口大小变更事件的支持。 因此我把他们全都拷贝到自己的项目中并注明来源了。在此之上再加以修改 MiniTerm 使窗口大小变更事件适配到 MiniTerm 的实现。目前并没有发现太多问题。有点小遗憾的是 MiniTerm 使用的 ConPTY 功能是 Windows 10 近些年的更新才引入的，因此许多网站空间的系统都不支持，会报「在 kernel32 中找不到 CreatePseudoConsole 入口」的错误，因此我准备了另一个方案，见接下来的第二部分。

第二部分：另行实现一个兼容低版本 Windows 的控制台进程适配。在项目中起名为 EasyTerminal。起初简单将控制台进程的标准输入输出还有错误输出重定向到 SSH 通道，然鹅，回车键不起作用，而且不回显。将回车键拦截下来，改成 StandardInput.WriteLine 调用，总算是能满足最基本的需求。尽管还是没有实时回显，得按下回车键之后才显示出来，功能按键和窗口大小什么的更无从说起。目前仍在使用零碎的时间持续摸索（咕XD）…

折腾2 -- 正常上网 将网站空间当作 V2 服务端使用

编译部署这个项目，然后将 V2 的两个 exe 和配置文件丢进 App_Data 目录，然后使用 WS 隧道连接到监听的 URL，最后在 V2 客户端指向 WS 隧道客户端，这时候就能吃了。分配了较大的缓冲区大小，这应该能有效减少损耗，如果网速慢，你需要测一下空间到你的网速。

不水。

标签: 软件开发 个人服务器 C# HTTP Web技术 传输协议 Windows .NET IIS WebSocket

评论(0) 引用(0) 浏览(274)

引入ace编辑器用作代码高亮（杀鸡焉用牛刀？

作者：V君 发布于：2020-3-20 22:57 Friday 分类：小服杂记

博客中有不少文章把代码段贴出来，有（dan）空（teng）的时候想办法去弄点样式，没（lan）空的时候就直接贴纯文本。是时候应该解决一下了。那就去看看用什么组件好吧。

（放狗出去找）发现了 highlight.js ，看起来不错，但不支持显示行号，并且作者也不打算实现它。那就再找找吧，（找了一会儿），想起 ace 编辑器了，如果只要设置成只读，它就是一个优秀的代码高亮组件，还能折叠代码块。

废话少说开始干！首先找到代码插入点，这次我选择在 content/templates/default/footer.php 底部的 #wrap 结束标记后面，插入 CDN 库引用然后写了下面的代码来启用。

先TL；DR一下使用方法：在需要高亮的元素上增加以下属性

1. highlight="ace" 启用代码高亮
2. ace-lang="javascript" 必选，指定代码语言
3. ace-theme="chrome" 可选，配色主题

代码语言和配色主题可以参照源代码文件名。

注释掉 log 语句并甩锅给 IE（

//replace nbsp \xa0 to normal space \x20
function normalizeSpaces(elm){
    var nodes = elm.childNodes;
    for (var i=0; i < nodes.length; ++i){
        if(nodes[i].nodeName === "#text") nodes[i].textContent = nodes[i].textContent.split("\xa0").join('\x20');
        else normalizeSpaces(nodes[i]);
    }
}

if (ace===undefined){
    console.log('highlight: ace undefined, no works');
}else{
    var items = document.querySelectorAll('[highlight=ace]');
    //console.log(`highlight: found ${items.length} element(s) to highlight, dealing with it.`);
    for (var i=0;i<items.length;++i){
        var item = items[i];
        
        var aceLang=item.getAttribute("ace-lang");
        if (aceLang === null){
            //console.warn(`highlight: the highlight element #${i} missing attribute 'ace-lang', skipped`);
            continue;
        }
        
        normalizeSpaces(item);
        
        var aceTheme=item.getAttribute("ace-theme");
        if (aceTheme === null) aceTheme = "Chrome";
        
        var editor = ace.edit(item);
        editor.setReadOnly(true);
        editor.setOptions({maxLines: Infinity});
        editor.setTheme("ace/theme/"+aceTheme);
        editor.session.setMode("ace/mode/"+aceLang);
        editor.setValue( editor.getValue().split('\n').join('\r\n'));
        editor.getSession().selection.clearSelection();
    }
}

继续水

标签: 软件开发 javascript Web技术

评论(0) 引用(0) 浏览(603)

[成功]使EMLOG支持PHP7和MYSQLi数据库连接方式

作者：V君 发布于：2019-4-8 0:47 Monday 分类：折腾手记

TL;DR
1) 定位到 $/include/lib/mysql.php 把里面的 mysql_xxx 系列方法名改成 mysqli_xxx 系列，并按照方法签名修改传入的参数，主要是顺序和连接实例，可以参考采鸟教程
2）定位到 $/include/lib/cache.php 把里面的
$$row['option_name'] = $row['option_value']; 改为
${$row['option_name']} = $row['option_value'];

目前就发现这两处，修改完之后貌似已经能继续工作。如果还有别的问题，可以持续观察apache的错误日志，继续找出要修改的地方。

扯扯：

安装Gogs时似乎因为系统软件包太旧没装上，作死轻易升级系统，还肆意跳过一些步骤，结果把服务器搞崩了。。。

重装最新版系统，灌软件包的时候发现EMLOG需要的PHP5没了，只能装7，装上之后遇到一系列数据库连接问题，还好在短时间内一边咕狗一边修改，给搞定了！

这回又折腾了一把所谓最好的编程语言，想不碰都难呀 XD

看来把时间分一些到目前一直在咕咕咕的个人博客系统了 乂目

标签: 软件开发 emlog php Web技术

评论(0) 引用(0) 浏览(733)

写了个小脚本去调整咕狗搜索结果

作者：V君 发布于：2018-12-18 12:06 Tuesday 分类：我的应用

获取: greasyfork

效果: 在咕狗搜索结果页,针对搜索结果条目,按配置将其标记后淡化及移到底部处理

用法: 安装后无需进一步配置即可按默认规则执行

限制: 目前还没实现界面, 域名配置硬编码在脚本中.

    目前仅实现了网页条目的处理, 对图片和视频不起作用

环境: 用了ES6语法, 需要较新版本浏览器支持

吐槽时间:

早些年,咕狗提供了内置于网页的过滤列表.

近些年,咕狗似乎是为了推广自己的浏览器,移除了内置的过滤列表改成chrome扩展.

这些年,chrome经过飞快地版本迭代,不断提升安全性,似乎把搜索结果过滤扩展挡住了...

尽管有许多第三方实现,懒得去摸索,但还是自己搞吧.

于是写几行脚本这玩意儿就出来了.手上有锤子,什么问题都是钉子,哪里不爽锤哪里!

标签: 谷歌 javascript Chrome 用户脚本 Web技术

评论(0) 引用(0) 浏览(854)