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) 浏览(310)

引入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) 浏览(1075)

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

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

获取: greasyfork

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

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

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

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

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

吐槽时间:

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

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

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

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

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

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

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

【更新】玩了一把Bridge.NET，手感不错

作者：V君 发布于：2018-9-24 9:32 Monday 分类：折腾手记

这次不是解决具体问题，TLDR就不存在了，直接开始扯。

在早些年就一直物色有没有C#版本的GWT之类的工具，在浏览器上跑C#或者把C#代码转成JS，
让B/S开发不用把精力浪费在js这种过分动态的弱类型语言上。
比起TS，还是能直接写C#更舒服。

接触Bridge.NET之前了解过Script#、JSIL、WootzJs之类的玩意儿，遗憾的是它们都不好使。
主要体现在元数据(反射)和三方库绑定(类型导入)上，直到发现了这货，
这两个问题已经得到基本上的解决，只是有些小毛病有点让人不爽。

搞B/S要对组成页面的三大要点DOM、样式、脚本，为啥不是HTML、CSS、JavaScript?
因为通过脚本可以控制前两者，嫌设置样式麻烦还有scss之类的预处理器，
手写原生代码时代已经一去不复返。

在Bridge.NET有一个名为Retyped的类型定义仓库，本文撰写时已收录3600+个常用Web类库。
不但三方库类型定义齐全，H5/DOM API也很完备，可以不管HTML直接用代码来撸DOM。

说完Web基础功能之后当然就是JS和TS做不到的运行时元数据啦！
Bridge.NET带有完整的元数据，我们可以尽情地使用各种Attribute和类型反射

顺便贴一下练手过程的副产物：
前端路由：基于历史API造了个带拦截的前端路由轮子玩，用了Attribute和反射，手感不错
热更新（伪）：每次调试生成后写入时间戳文件，轮询，检测到差异就刷新页面
Lodash：Retyped的类型定义库会造成编译失败略不爽，反正也只用到debounce，就自己撸了
Ace编辑器：类型定义用着还不错，【更新】虽然目前似乎没有同步到原来的类库定义，但可以在初始化之前来个workaround补丁脚本。

体验报告到此结束，接下来不用纠结选VUE还是这玩意了，博客系统的管理界面前端就用它吧！

标签: 软件开发 javascript C# Web技术

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

高德WEB地图的坑: 首个标注在创建后无法立即获取DOM

作者：V君 发布于：2018-3-27 12:10 Tuesday 分类：挖坑经验

TL;DR 

创建地图实例之后不管三七二十一先创建一个不可见的标注.

自从第二个标注开始你就能顺利在创建之后立即拿到DOM了.

 

不扯了, 已经被折磨到不要不要才摸清套路.

标签: 软件开发 javascript Web技术 GIS

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