从本地存储打印对象

Question

我有一个将数据保存到浏览器本地存储的费用表。我在表格下方的页面上有一个按钮，以便您填写表格后，您可以点击以漂亮的格式打印数据。

由于我的应用程序的功能，我必须使用本地存储中的 JSON 数据。

我正在使用 js 变量从本地存储中获取数据：

var my_expenses = localStorage.getItem('my_expenses');

这是我的浏览器本地存储中的条目，具有未缩小的值。

密钥：my_expenses 值：

{
    "income": {
        "1": {
            "name": "Pay (after tax)",
            "freq": "26",
            "value": "233"
        },
        "2": {
            "name": "Partners take home pay",
            "freq": "4",
            "value": "10"
        },
        "3": {
            "name": "Bonuses/overtime",
            "freq": "26",
            "value": "30"
        },
        "4": {
            "name": "Income from savings and investments",
            "freq": "1",
            "value": "50"
        },
        "5": {
            "name": "Child support received ",
            "freq": "12",
            "value": "40"
        }
    },
    "outgoings": {
        "1": {
            "name": "Electricity",
            "freq": "4",
            "value": "0"
        },
        "2": {
            "name": "Gas",
            "freq": "4",
            "value": "0"
        },
        "3": {
            "name": "Water",
            "freq": "4",
            "value": "0"
        },
        "4": {
            "name": "Internet",
            "freq": "4",
            "value": "0"
        },
        "5": {
            "name": "Telephone",
            "freq": "4",
            "value": "0"
        },
        "6": {
            "name": "Car Insurance",
            "freq": "1",
            "value": "0"
        }
    }
}

根据 Print.js 你可以像这样打印 JSON 数据（包括我的变量和我的本地存储数据）：

 <button type="button" onclick="printJS({printable: my_expenses, properties: ['name', 'freq', 'value'], type: 'json'})">
Print JSON Data

出于某种原因，我的控制台出现错误，我无法弄清楚，也没有打开对话框进行打印。

Uncaught Error: Missing printable information.
at init (print.min.js:1)
at HTMLButtonElement.onclick ((index):156)

我想可能是我的JSON在本地存储的结构？任何帮助将不胜感激。

像这样使用 JSON.parse() 试过：

var my_expenses = JSON.parse(localStorage.getItem("my_expenses"));

在我添加 JSON 解析之前。我遇到了错误，这是控制台中本地存储的输出。

在我添加它之后，这是输出并且打印按钮似乎可以工作：

但是打印对话没有数据？

如何创建对象和本地存储功能：

//Set the default incomes and outgoings here
var defaultsObj = {
    'income':{
        1:{name:"Pay (after tax)",freq:52,value:0},
        2:{name:"Partners take home pay",freq:4,value:0},
        3:{name:"Bonuses/overtime",freq:26,value:0},
        4:{name:"Income from savings and investments",freq:1,value:0},
        5:{name:"Child support received ",freq:12,value:0}
    },'outgoings':{
        1:{name:"Electricity",freq:4,value:0},
        2:{name:"Gas",freq:4,value:0},
        3:{name:"Water",freq:4,value:0},
        4:{name:"Internet",freq:4,value:0},
        5:{name:"Telephone",freq:4,value:0},
        6:{name:"Car Insurance",freq:1,value:0}
    }
};  

//Functions to store and retrieve objects from localstorage
function ls_store(name,o){
    localStorage.setItem(name, JSON.stringify(o));          
};
function ls_read(name){
    return JSON.parse(localStorage.getItem(name));
};  

function set_defaults(){
    ls_store('my_expenses',defaultsObj);
    expensesObj = ls_read('my_expenses'); 
}
//If our localstroage items are empty let's store the defaults
if(ls_read('my_expenses')==null){
    set_defaults();
}

Answer 1

你不保存一个数组，printjs 等待一个数组。

尝试保存到两个不同的数组中，首先，将结果查看到您的 pdf 中。

如果显示第一个数组的数据，您必须：调用两次 printjs，一次用于第一个数组，另一次用于第二个数组，或者将这两个数组组合成一个数组，如果是 incombe 或 outcome，则可能添加一个属性来区分。

从本地存储打印对象

Printing object from Local Storage

html

javascript

printing

json

printjs