lazy-loading - 将 Microsoft Teams 聊天导出到文件以进行归档

Question

有没有人设法以任何文件格式（包括聊天图像，例如屏幕截图、用户头像等）保存来自 Microsoft Teams 的整个聊天记录？

我已经在所有浏览器中以所有可以想到的方式进行了尝试。

问题似乎是 Teams 从内存中删除了当前视口中不包含的所有文本，甚至更多的是图像。

这看起来像延迟加载，但显然不是，因为无法通过禁用浏览器中的延迟加载选项来阻止它（在 Chrome 和 Firefox 中使用基于浏览器的 Teams 版本进行了尝试）。

仅显示和加载当前视口的内容。滚动时会立即卸载所有其他向上和向下的内容。因此，无法以任何方式分别选择、保存或导出整个聊天，甚至无法将其复制到剪贴板：

滚动时立即卸载视口外的内容

Answer 1

这是我在 Chrome 控制台中提出的一些意大利面条——它会滚动到您选择的任何聊天的顶部，然后逐条向下移动，创建一个可打印/可保存的副本。甚至加载所有内联图片。

唯一的问题是，很长的聊天记录需要一段时间才能滚动到开头。

所以，是的，要使用，只需打开Chrome 控制台窗口(Ctrl+Shift+J) 复制并粘贴它，然后按 Enter。然后等待它施展魔法。

let xxx = 0;
let ddd = 0;
let fullpage1 = '' 

fullpage1 = '<h1 id="chat-header-title2">'+jQuery('#chat-header-title').html()+'</h1>';

//**********************************************
//Go to top of page

jj234 = function() {


jQuery("virtual-repeat").scrollTop(-2000);



if (xxx < 50) {setTimeout(jj234, 50); } else {setTimeout(ScrollDownTakeNote, 1000); }

if (jQuery("virtual-repeat").hasClass("not-at-top")) {xxx = 0;} else {xxx += 1;} 

}

jj234();


//Create a place to hold a copy of the content
jQuery("body").append('<div id="thebigdiv" style="z-index: 10000; overflow: auto; background: white;"></div>');


//*************************************************
//Scroll down the chat, once things load, copy it to the temp location, removing some dynamic content

ScrollDownTakeNote = function() {

if (jQuery('.disable-event').length==0 && jQuery('.ts-image .loading').length==0) {
ddd += 1;

jQuery("#thebigdiv").append('<div id="boxdiv'+ddd+'"></div>');

jQuery("virtual-repeat div.clearfix").each( function () {
jQuery("#boxdiv"+ddd).append('<div class="messageClip" id="'+jQuery(this).attr('id')+'">' + jQuery(this).html() + '</div>');
});

jQuery("#boxdiv"+ddd+" [data-tid]").attr("data-tid","");

jQuery("#boxdiv"+ddd+" [ng-if]").attr("ng-if","");

jQuery("#boxdiv"+ddd+" [ng-class]").attr("ng-class","");

jQuery("#boxdiv"+ddd+" [ng-source]").attr("ng-source","");

jQuery("#boxdiv"+ddd+" [ng-class]").attr("ng-class","");

jQuery("#boxdiv"+ddd+" [simple-mouseenter]").attr("simple-mouseenter","");

jQuery("#boxdiv"+ddd+" [ng-mouseleave]").attr("ng-mouseleave","");

jQuery("#boxdiv"+ddd+" [message-view-model]").attr("message-view-model","");

jQuery("#boxdiv"+ddd+" [message-vm]").attr("message-vm","");

jQuery("#boxdiv"+ddd+" [is-enabled]").attr("is-enabled","");

jQuery("#boxdiv"+ddd+" [host-tenant-id]").attr("host-tenant-id","");


jQuery("#boxdiv"+ddd+" [scroll-item-tracker]").attr("scroll-item-tracker","");
jQuery("#boxdiv"+ddd+" [scroll-item-id]").attr("scroll-item-id","");
jQuery("#boxdiv"+ddd+" [scroll-item-event-name]").attr("scroll-item-event-name","");
jQuery("#boxdiv"+ddd+" [is-above-view-callback]").attr("is-above-view-callback","");
jQuery("#boxdiv"+ddd+" [is-in-view-callback]").attr("is-in-view-callback","");
jQuery("#boxdiv"+ddd+" [scroll-container]").attr("scroll-container","");
jQuery("#boxdiv"+ddd+" [check-above-viewport]").attr("check-above-viewport","");
jQuery("#boxdiv"+ddd+" [delay-scroll-tracker-init]").attr("delay-scroll-tracker-init","");
jQuery("#boxdiv"+ddd+" [deferred-render-ready]").attr("deferred-render-ready","");

jQuery("#boxdiv"+ddd+" img[target-src]").each(function () {$(this).attr("lazy-load","false"); $(this).attr("src",$(this).attr("target-src"));});

jQuery("#boxdiv"+ddd+" skype-status").remove();

fullpage1 += jQuery("#thebigdiv").html();
jQuery("#thebigdiv").html(".");

jQuery("virtual-repeat.simple-scrollbar").scrollTop(jQuery("virtual-repeat.simple-scrollbar").scrollTop()+2000);

}

if  (jQuery('[data-scroll-pos="1"').length==0 || jQuery("virtual-repeat").hasClass("not-at-bottom") || jQuery('.disable-event').length>0 || jQuery('.ts-image .loading').length>0 ) {setTimeout(ScrollDownTakeNote, 500);
} else {printdiv("#thebigdiv")}

};

//**********************************
//Open a Save File dialog for the HTML source and open the print window for a Print-to-PDF
//(Why not both?)

function printdiv(printdivname) {
        jQuery(printdivname).html(fullpage1);
    jQuery('#outer-shell').remove();
    jQuery('body').css({"overflow":"scroll"});
    
    $('div.messageClip[id]').each(function () {
            $('div.messageClip[id="' + this.id + '"]:gt(0)').remove();
    });
    jQuery(printdivname).css({"margin-left":"15px"});
    jQuery('body').append("<style>@media print { * { overflow: visible !important; } .page { page-break-after:always; }}");
    jQuery('head').append('<link rel="stylesheet" href="https://statics.teams.cdn.office.net/hashed/stylesheets.theme-defaultV2.min-86505e7.css" />');
    
    fullpage2 = new XMLSerializer().serializeToString(document);
    //fullpage2 = fullpage2.replace(/[\u00A0-\u9999<>\&]/gim, function(i) {
    //  return '&#'+i.charCodeAt(0)+';'; 
    //});

    saveTextAsFile(fullpage2);  

    waitonimages();
    
}

let xasd = 0;
function waitonimages() {
    xasd = 0;
    jQuery("img").each(function () {if (!this.complete) { xasd+=1 }});
    if (xasd == 0) {window.print()} else {setTimeout(waitonimages,1000);}   
}

function saveTextAsFile(text1)
{
    //inputTextToSave--> the text area from which the text to save is
    //taken from
    var textToSave = text1;
    var textToSaveAsBlob = new Blob([textToSave], {type:"text/html"});
    var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
    //inputFileNameToSaveAs-->The text field in which the user input for 
    //the desired file name is input into.
    var fileNameToSaveAs = jQuery('#chat-header-title2').html() + "-source.htm";

    var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    downloadLink.href = textToSaveAsURL;
    downloadLink.onclick = destroyClickedElement;
    downloadLink.style.display = "none";
    document.body.appendChild(downloadLink);

    downloadLink.click();
}

function destroyClickedElement(event)
{
    document.body.removeChild(event.target);
}

Answer 2

我遇到了同样的问题。我无法使用图形 API，因为我的用户没有权限（只是普通的 Teams 用户）。

我还注意到您提到的那种“延迟加载”，所以我找到的解决方案是扩展视图，以便所有内容都可见（并加载）。

我使用此处建议的 Firefox 控制台命令执行此操作：

1. 确保您滚动到要保存的聊天对话的顶部和底部
2. 按 F12 打开开发者工具
3. 在开发人员工具中选择“控制台”选项卡
4. 将下面的代码粘贴到控制台中，它应该缩小页面

const zoomFactor = (document.querySelector(".ts-main-flex").offsetHeight / document.querySelector(".list-wrap").offsetHeight);
document.documentElement.style.setProperty("transform", "scale(" + zoomFactor + ")");
document.documentElement.style.setProperty("transform-origin", "top");
document.documentElement.style.setProperty("min-height", (100 / zoomFactor) + "vh");

5. 页面完全加载后，将下面的代码粘贴到控制台中，它应该会展开所有分组聊天。

document.querySelectorAll(".expand-collapse").forEach(link => link.click());
document.querySelectorAll(".ts-see-more-button.ts-see-more-fold").forEach(link => link.click());

6. 将下面的代码粘贴到控制台中，它应该调整缩放级别

const newZoomFactor = (document.querySelector(".ts-main-flex").offsetHeight / document.querySelector(".list-wrap").offsetHeight);
document.documentElement.style.setProperty("transform", "scale(" + newZoomFactor + ")");
document.documentElement.style.setProperty("min-height", (100 / newZoomFactor) + "vh");

7. 页面完全加载后，粘贴下面的代码以重置缩放并添加滚动条

document.documentElement.style.removeProperty("transform");
document.documentElement.style.removeProperty("transform-origin");
document.documentElement.style.setProperty("overflow", "auto");

8. 使用 SingleFile 保存页面
9. 喝杯咖啡，享受时光的流逝，为你的CPU祈祷
10. 瞧！您保存的页面应该没问题

使用 SingleFile 保存页面对我来说非常有用。

对于很长的聊天，我使用了 SingleFileZ，它是 SingleFile 的一个分支，它增加了压缩并生成一个自动提取文件。在这些情况下，一些步骤需要我几个小时才能完成。

Answer 3

您可以使用图形 API和图像进行团队聊天，但仅限于 20 天的数据。您最多可以获取团队聊天 20 天。还有一个功能请求将团队聊天导出到外部。目前您无法导出团队聊天。能否请您支持 Teams聊天历史记录导出功能，以便在将来使用此功能。您可以联系产品支持渠道以获取更多信息

Answer 4

在不太长的聊天中，对我来说最简单和最好的方法是在 Opera 浏览器中打开聊天，然后尽可能缩小直到整个聊天以很小的尺寸可见，然后将页面保存为 PDF。

通过这种方式，您可以获得包含高质量矢量文本和图像的聊天 PDF。

Answer 5

我发现在浏览器中打开 Teams 聊天可以让您在对话中选择并复制粘贴多条消息和图像。

下一步：在目标（MS Word）文件中使用 regex-replace 删除所有元信息（时间戳 + 名称）。

代替 '[？？？？？？？？？？？？？？？？？？？？？？？' 和 ''