使用 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)

Powered by emlog 去你妹的备案 sitemap