【JS】如何保证样式无损的下载一个页面为.html文件

【JS】如何保证样式无损的下载一个页面

需求

现在有一个报告页面,需要前端直接将报告内容下载为一个html文件,并且可以脱机打开,样式与页面保持一致。

分析与方案

1.首先,单独写一个.css文件,让页面与下载的html文件都使用的思路肯定是可行的;但是我的页面使用VUE+less开发,同时有大量的公共样式,剥离出一个.CSS文件的难度极大。
2.一个页面无非由 .html .css .js三部分构成;我们只需要将这个页面用到的三部分都下载下来,并保持正确的路径与依赖关系,就能够将一个页面完整复刻。

对于笔者来说,方案2可行性更高且通用性更高;当然,笔者的需求只需要下载一个可以观看的报告,对与JS文件没有需求,所以实现代码会跳过.JS文件。不过有需要的话可以以相同思路实现即可。

代码实现

downloadHtml(){
			//初始化css
 			let css = '';
 			//笔者因为页面使用rem为单位,所以需要一个初始化html元素font-size的方法;因为这个方法没有单独抽离文件且较为简单,笔者选择在下载时手动添加;
            let js = `
            function setFontSize() {
    const designWidth = 1920; //设计稿的宽度,根据实际项目调整
    const fontSize = document.documentElement.clientWidth / designWidth * 100;
    document.querySelector('html').style.fontSize = fontSize + 'px';
}
function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            func.apply(context, args);
        }, wait);
    };
}
window.onresize = function () {
    setFontSize()
};
setFontSize();`;
			//直接写入script这样的字符串会有问题,将它从中间拆分再拼接可以避免
			//将要执行的js通过
                    
                    

你可能感兴趣的:(踩过的坑,javascript,html,vue.js,前端)